首页 文章

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

提问于
浏览 次
0

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

我对Bootstrap比较新，所以我猜我做错了 .

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

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

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

html css twitter-bootstrap mobile

2 回答

  • 2

    尝试使用以下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所示

    希望有所帮助 .

    回复于
  • 0

    尝试使用此代码：

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

    希望这可以帮助 .

    回复于

相关问题