将 Bootstrap 导航栏用作不会折叠的固定顶部栏答案

【问题标题】：Use Bootstrap navbar as a fixed top bar that doesn't collapse将 Bootstrap 导航栏用作不会折叠的固定顶部栏
【发布时间】：2014-12-22 23:44:23
【问题描述】：

我正在尝试做一件简单的事情：一个顶部栏（如固定导航栏），左侧有品牌名称，右侧有 2 个图标。我正在为移动设备开发，所以我不希望它针对小屏幕进行更改（折叠，就像默认情况下的导航栏一样）。

我对 Bootstrap 比较陌生，所以我想我做错了什么。

为了防止崩溃，我把所有东西都放在了navbar-header div中。我创建了一个<span class="pull-right"> 来让图标显示在右侧，但我无法让它们正确呈现。

（我怀疑这是否重要，但我使用的是 Bootstrap 3.0.x。）

这是我目前拥有的：http://jsfiddle.net/rd73tecL/2/

【问题讨论】：

标签： html css twitter-bootstrap mobile

【解决方案1】：

尝试使用以下 CSS 禁用折叠效果（此处引用：Bootstrap 3 - disable navbar collapse）：

.navbar-collapse.collapse {
    display: block !important;
}

.navbar-nav>li, .navbar-nav {
    float: left !important;
}

.navbar-nav.navbar-right:last-child {
    margin-right: -15px !important;
}

.navbar-right {
    float: right !important;
}

我不确定右侧的 2 个图标是什么意思：徽标的右侧还是导航栏的右侧？如果是后一种情况，您可以将导航栏链接放入 div 并添加 pull-right 类以将其放在导航栏的右侧。然后，您还需要将 display: inline-block !important; 添加到导航栏徽标的 css 中，如 JSfiddle 所示

希望对您有所帮助。

【讨论】：

【解决方案2】：

尝试使用此代码：

        <nav class="navbar navbar-default navbar-fixed-top">
            <div class="container">
              <div class="navbar-header">
                <a class="navbar-brand" href="#">Fibe</a>
                <span class="navbar-right pull-right">
                  <ul class="navbar-nav nav">
                    <li class="navbar-link"><span class="glyphicon glyphicon-search"></span></li>
                    <li class="navbar-link"><span class="glyphicon glyphicon-star"></span></li>
                  </ul>
                </span>
              </div>
            </div>
        </nav>

刚刚修改

<span class="navbar-right"> with <span class="navbar-right pull-right">

希望这会有所帮助。

【讨论】：

该代码将它们移到右侧，但它们被移出了屏幕的一半。它们应该像常规导航栏项目一样格式化。