语义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>