Question

以下菜单在更广阔的视图中看起来很好，但最后一项（第四项）在移动视图中消失了。它也消失了<div class="right stackable menu">。

<div class="ui stackable menu">
  <a href="#" class="item">Home</a>
  <a href="#" class="item">Second</a>
  <div class="right menu">
    <a href="#" class="item">Third</a>
    <a href="#" class="item">Fourth</a>
   </div>
</div>

如何在移动视图中显示所有四个项目的可堆叠菜单？

Answer 1

截至2016年9月22日这是一个漏洞（链接：https://github.com/Semantic-Org/Semantic-UI/issues/3604）

要移动错误，您可以执行以下操作：https://jsfiddle.net/batrasoe/udpzkj7p/

<div class="ui stackable menu">
  <a href="#" class="item">Home</a>
  <a href="#" class="item">Second</a>   
   <a href="#" class="right item">Third</a>  
   <a href="#" class="item" id="last-item">Fourth</a>

  </div>

它不使用右侧菜单，而是将正确的类分配给菜单中的倒数第二个元素，这会将元素的右侧推向右侧。

您还必须向最后一个元素添加border-left属性。请参阅小提琴。

子菜单中的项目在Semantic-UI中的移动视图中消失

1 个答案: