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

This is my page structure:

这是我的页面结构：

Page 1

• Sub-page 1
• 第1页
• Sub-page 2
• 第2页

Page 2

Page 3

---

On mobile views, I want this to be rearranged like this:

在移动视图中，我希望将其重新排列为：

Page 1

Page 2

Page 3

Sub-page 1

Sub-page 2

I was able to achieve this using my limited knowledge of jQuery with the following:

我能够使用我对jQuery的有限知识来实现​​这一点，具体如下：

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

http://www.bootply.com/XI1gMtscQ5

http://www.bootply.com/XI1gMtscQ5

However, when you resize the window back up to SM, MD, LG widths, the subpages don't go back to where they're supposed to be unless you refresh the page. How can I have them rearrange to be 1 level only on mobile view?

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

2 个解决方案

#1

Do two different nav sets and you can do it using only CSS and HTML really.
Make the menu you want for sm,md,lg like

做两个不同的导航集，你可以真正使用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>

Try that out, don't forget to include the navbar classes as well, but definitely try that. It's how I, and a lot of developers, display different content for different sizes.
On my portfolio for example I hide several buttons this way on my page when it's broken down to a mobile view to make it less cluttered.

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

#2

See the Bootstrap Documentation here.

请参阅此处的Bootstrap文档。

For example for the subpages you would give the following classes.

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

Give the child subpages (where they are under page 1) the class hidden-xs and give the subpage items that should only be visible on mobile the class visible-xs

给子子页面（它们在第1页下面的位置）隐藏-xs类，并给出只应在移动设备上可见的子页面项目visible-xs