Twitter bootstrap 如何使引导导航栏半响应？

我需要引导导航栏始终显示某些元素，并自动折叠其他元素。如何做到这一点？

只需在

class=“collapse”

项目之外创建另一个列表（

navbar nav

）

在以下示例中，link1/2将始终可见，而link3/4将在小型设备上折叠：

CSS

#navbar1 > li {
    float: left;
}

HTML

<nav class="navbar navbar-default" role="navigation">
    <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Brand</a>
        <ul class="nav navbar-nav" id="navbar1">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
        </ul>
    </div>
    <div class="collapse navbar-collapse" id="navbar-collapse">
        <ul class="nav navbar-nav">
            <li><a href="#">Link 3</a></li>
            <li><a href="#">Link 4</a></li>
        </ul>
    </div>
</nav>

切换导航

我刚试过你的代码。当窗口变小时，链接1和链接2将转到新行。它不好用。请试一试。我已经用预览编辑了我的答案。这就是你要找的吗？是的。杰出的谢谢。当窗口变小，物品折叠时，导航栏的高度会增加。我正在努力解决这个问题。你有什么想法吗？谢谢。这是基本的CSS，您需要覆盖一些引导样式（如

.navbar nav、.navbar toggle{margin bottom:0；}

）。如果可以的话，别忘了勾选我的答案