セマンティックUI - 次の行へのメニュー項目の代わりに、長い水平スクロール

Question

ここでは私のナビゲーションバーのメニューコードが

$(function() { 
 
\t $(".dropdown").dropdown(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.css" rel="stylesheet"/> 
 
<div class="ui container"> 
 
    <div class="ui secondary extra-large menu"> 
 
     <a class="item no-background brand" href="/">Brand</a> 
 
     <a class="item no-background" href="/">Home</a> 
 
     <a class="item no-background" href="/">Products</a> 
 
     <a class="item no-background" href="/">Testimonials</a> 
 
     <div class="ui no-background dropdown pointing item"> 
 
      Services 
 
      <i class="dropdown icon"></i> 
 
      <div class="menu"> 
 
       <div class="item">Mobile</div> 
 
       <div class="item">Tablet</div> 
 
       <div class="item">Computer</div> 
 
      </div> 
 
     </div> 
 
     <div class="ui dropdown pointing item"> 
 
      Other 
 
      <i class="dropdown icon"></i> 
 
      <div class="menu"> 
 
       <div class="item">Hosting</div> 
 
       <div class="item">Webmail</div> 
 
       <div class="item">DNS</div> 
 
      </div> 
 
     </div> 
 
     <div class="right item"> 
 
      <button class="ui button">Create Account</button> 
 
     </div> 
 
     <div class="right item"> 
 
      <button class="ui primary button">Login</button> 
 
     </div> 
 
    </div> 
 

 
</div>

である私は、モバイルで次の行にショーを表示されない私のメニュー項目をしたいですそれは私に非常に長い水平スクロールを与えます。可能であれば、私はそれらを画面サイズに関して調整します。

Answer 1

スタック可能なメニューを使用できます。 Howerverは、次のように書かれています。

スタック可能なメニューは、単純なメニューコンテンツでのみ使用することを意図しています。 積み上げられたメニューは、ドロップダウン位置の調整など、垂直方向の メニューのすべての追加のスタイルを複製しません。

$(function() { 
 
\t $(".dropdown").dropdown(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.13/semantic.css" rel="stylesheet"/> 
 
<div class="ui container"> 
 
    <div class="ui secondary extra-large stackable menu"> 
 
     <a class="item no-background brand" href="/">Brand</a> 
 
     <a class="item no-background" href="/">Home</a> 
 
     <a class="item no-background" href="/">Products</a> 
 
     <a class="item no-background" href="/">Testimonials</a> 
 
     <div class="ui no-background dropdown pointing item"> 
 
      Services 
 
      <i class="dropdown icon"></i> 
 
      <div class="menu"> 
 
       <div class="item">Mobile</div> 
 
       <div class="item">Tablet</div> 
 
       <div class="item">Computer</div> 
 
      </div> 
 
     </div> 
 
     <div class="ui dropdown pointing item"> 
 
      Other 
 
      <i class="dropdown icon"></i> 
 
      <div class="menu"> 
 
       <div class="item">Hosting</div> 
 
       <div class="item">Webmail</div> 
 
       <div class="item">DNS</div> 
 
      </div> 
 
     </div> 
 
     <div class="right item"> 
 
      <button class="ui button">Create Account</button> 
 
     </div> 
 
     <div class="right item"> 
 
      <button class="ui primary button">Login</button> 
 
     </div> 
 
    </div> 
 

 
</div>