如何使 Bootstrap 导航栏半响应？答案

【问题标题】：How to make Bootstrap navbar semi-responsive?如何使 Bootstrap 导航栏半响应？
【发布时间】：2014-03-15 08:21:18
【问题描述】：

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

【问题讨论】：

标签： twitter-bootstrap navbar collapse

【解决方案1】：

只需在您的 class="collapse" 项目之外创建另一个列表 (navbar-nav)。

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

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，你需要覆盖一些 Bootstrap 样式（如.navbar-nav, .navbar-toggle { margin-bottom: 0; }）。如果没问题，别忘了勾选我的答案。 ;)