twitter-bootstrap - 随着宽度的增加，不断填充 twitter-bootstrap 导航菜单。

Question

我正在使用默认的 Twitter Bootstrap 响应式导航栏（从移动设备上工作）。我希望菜单随着导航栏宽度的扩大而不断填充。

我当前的导航（非常适合移动设备）

[ menu item 1 | menu item 2 | menu item 3 | all items ]

然而，随着宽度的扩大，我想用更多的菜单项填充列表。

[ menu item 1 | menu item 2 | menu item 3 | menu item 4 | all items ]

Answer 1

Bootstrap 有一个“隐藏”类，它将根据大小隐藏元素，这将在类的末尾添加后缀。Bootstrap 为您提供了在某些断点处触发的这些类：hidden-xs、hidden-sm、hidden-md、hidden-lg。

因此，在您的场景中，您可以执行以下操作：

<ul>
    <li>Menu Item 1</li>
    <li>Menu Item 2</li>
    <li>Menu Item 3</li>
    <li>Menu Item 4</li>
    <li class="hidden-xs hidden-sm">Item 5</li>
    <li class="hidden-xs hidden-sm hidden-md">Item 6</li>
<ul>

基本上，这些类意味着元素将被隐藏，直到它落入隐藏类覆盖的断点范围之外，在这种情况下，最后 2 个元素的 md 和 lg。

或者，Bootstrap 有一组“可见”类，它们做相反的事情，在这种情况下，你可以将“隐藏”类放在你想要总是隐藏的任何东西上，然后应用 'visible-[size]-[display 属性]' 类（例如：'visible-lg-inline' 或 'visible-lg-inline-block'，在你的情况下），当它们落入某些断点范围时显示菜单项。

<ul>
    <li>Menu Item 1</li>
    <li>Menu Item 2</li>
    <li>Menu Item 3</li>
    <li>Menu Item 4</li>
    <li class="hidden visible-md-inline visible-lg-inline">Menu Item 5</li>
    <li class="hidden visible-lg-inline">Menu Item 6</li>
<ul>

这一切都假设您没有尝试基于断点将内容动态添加到 DOM，并且这些菜单项已经存在于您的 HTML 代码中。否则，您将不得不使用自定义 Javascript/jQuery 脚本来执行此操作。