在 Bootstrap 3 中，如何将下拉列表中的列表项设置为第一级菜单项，并且仅在 xs 屏幕尺寸上设置

Question

这是我的页面结构：

第 1 页

• 子页 1
• 子页 2

第 2 页

第 3 页

---

在移动视图上，我希望像这样重新排列：

第 1 页

第 2 页

第 3 页

子页 1

子页 2

我能够利用我对jQuery的有限知识来实现这一点，如下所示：

<script>
bsContainerWidth = $("body").find('.container').width()
if (bsContainerWidth <= 768)
  $('.dropdown .sub-page').appendTo($('.navbar-right'));
</script>

http://www.bootply.com/XI1gMtscQ5

但是，当您将窗口大小调整回 SM、MD、LG 宽度时，除非您刷新页面，否则子页面不会返回到应有的位置。如何让它们重新排列为仅在移动视图上为 1 级？

Answer 1

做两个不同的导航集，你可以只使用 CSS 和 HTML 来完成。
制作您想要的菜单 sm，md，lg 喜欢

/* this displays it only on small, medium and large screens */
<div id="navbarBigScreen" class="hidden-xs visible-sm visible-md visible-lg">
  /* Navbar code here */
Page 1
   Subpage 1
   Subpage 2
Page 2
Page 3
</div>
/* this does only extra small screens */
<div id="navbarExtraSmallOnly" class="visible-xs hidden-sm hidden-md hidden-lg">
/* navbar for extra small here */
  Page 1
  Page 2
  Page 3
  Sub page 1
  Sub page 2
</div>

尝试一下，不要忘记

也包含导航栏类，但一定要尝试一下。 这就是我和许多开发人员为不同大小显示不同内容的方式。
例如，在我的投资组合中，当页面分解为移动视图时，我会以这种方式隐藏几个按钮，以使其不那么混乱。

Answer 2

请参阅此处的引导文档。

例如，对于子页面，您将提供以下类。

为子子页面（它们位于第 1 页下的位置）提供类hidden-xs，并为只应在移动设备上可见的子页面项提供类visible-xs