Question

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

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

为了防止崩溃，我将所有内容放在navbar-header div中。我创建了一个<span class="pull-right">来获取右侧的图标，但我无法正确渲染它们。

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

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

Answer 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并添加右拉类以将其放在导航栏的右侧。然后，您还需要将display: inline-block !important;添加到导航栏徽标的CSS中，如此JSfiddle

所示

希望有所帮助。

Answer 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">

希望这有帮助。

使用Bootstrap导航栏作为不折叠的固定顶栏

2 个答案: