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

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 日的未解决错误（link：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>

它不使用右键菜单，而是将右键class分配给菜单中的倒数第二个元素，这会将元素的右边推到右边。

您还必须向最后一个元素添加左边框属性。有关详细信息，请参阅 fiddle。

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

Item in a sub-menu disappearing in mobile view in Semantic-UI

semantic-ui