html - 使用 Bootstrap 导航栏作为固定的顶部栏，不会折叠

Question

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

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

为了防止崩溃，我把所有东西都放在了navbar-header中分区我创建了一个 <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 个图标是什么意思:在 Logo 的最右边还是导航栏的右边？如果是后一种情况，您可以将导航栏链接放入一个 div 中并添加 pull-right 类以将其放在导航栏的右侧。然后，您还需要将 display: inline-block !important; 添加到导航栏 Logo 的 css 中，如 JSfiddle 所示。

希望对您有所帮助。