推特引导程序3导航栏导航栏就在导航栏外崩溃

在Twitter引导程序2.3.2中，我可以有以下内容：http://jsfiddle.net/aQwUZ/3/

<div class="navbar navbar-inverse navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <a data-target=".nav-collapse" data-toggle="collapse" class="btn btn-navbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a href="#" class="brand">BRAND</a>
                <ul class="nav  pull-right">
                  <li>
                    <a href="#">Fixed Link</a>
                  </li>
                </ul>
                <div class="nav-collapse">
                    <ul class="nav">
                        <li><a href="#">L1</a></li>
                        <li><a href=#">L2</a></li>
                    </ul>
                </div>
            </div>
        </div>
</div>

一个twitter引导程序导航栏，在移动响应视图中，"固定链接"在标题中保持可见。

现在，在bootstrap 3中，升级我的代码后，我只能：http://jsfiddle.net/EC3Ly/4/

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">BRAND</a>
                </div>
                <ul class="nav navbar-nav navbar-right">
                          <li>
                            <a href="#">Fixed Link</a>
                          </li>
                </ul>
                <div class="navbar-collapse collapse">
                    <ul class="nav navbar-nav">
                         <li><a href="#">L1</a></li>
                        <li><a href=#">L2</a></li>
                    </ul>
                </div>
            </div>
</nav>

在移动响应视图中，我得到2行。。。我试图包装在"导航栏标题"节点中http://jsfiddle.net/EC3Ly/5/或者在第一个"导航栏标题"中没有成功。

我错过了什么？

谢谢，

Alexandre

我在BS3中遇到了同样的问题，我发现解决这个问题的唯一方法是使用pull-left和pull-right 的组合

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
  <div class="container">
    <div class="navbar-header pull-left">
      <a class="navbar-brand" href="#">BRAND</a>
    </div>
    <div class="navbar-header pull-right">
      <ul class="nav navbar-nav pull-left">
        <li>
          <a href="#">Fixed Link</a>
        </li>
      </ul>
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">
        <li><a href="#">L1</a></li>
        <li><a href="#">L2</a></li>
      </ul>                    
    </div>
  </div>
</nav>

工作演示：http://bootply.com/78856

移动导航栏中的两行是由导航栏标题的clearfix引起的：

.navbar-header {
  .clearfix();
  @media (min-width: @grid-float-breakpoint) {
    float: left;
  }
}

你可以使用媒体查询和css来撤销这个clearfix（并在折叠的下拉列表之前添加一个新的）

.navbar-right {float: right !important;}
@media(max-width:767px)
{
    .navbar-right {margin-right:20px;}
    .navbar-header:after 
    {
    clear: none;
    }
    .navbar-nav.navbar-right > li { float: left; }
    .navbar-collapse:before {clear:both;}
    .navbar-collapse {overflow-y: hidden;}
    .navbar-collapse.in {overflow-y: visible;}
    .navbar{border-color: #101010; border-width: 0 0 1px;}
    .navbar-collapse.in > ul {border-color: #101010; border-top:1px double;}
}
}

演示：http://bootply.com/82366

媒体查询还为较小屏幕上的导航栏右侧添加了浮动右侧。为了在生产中使用这些代码，您可能会修复边界，也可能修复nawbar css转换。

问题出在navbar崩溃的点上。默认情况下，Bootstrap折叠为768px。如果你增加这个值，你的navbar会更快崩溃，你的问题也会消失。

最好的方法是自定义引导文件，并将@grid-float-breakpoint更改为850px（或您需要的任何大小）。您可以从中轻松自定义bootstrap 3http://getbootstrap.com/customize/?id=9720390

希望这能有所帮助。

我用这种方式修复了它。就在品牌之后，添加了两条具有相同类别和一个附加类别的新线路。

        <!-- Branding Image -->
        <a class="navbar-brand" href="{{ url('/') }}">Home</a>
        <!-- Fake branding to avoid breaking up navbar -->
        <a class="navbar-brand navbar-brand-fake">Item 1</a>
        <a class="navbar-brand navbar-brand-fake">Item 2</a>

并将其添加到您的css文件中：

a.navbar-brand-fake {
    font-size: 15px;
    line-height: 21px;
    margin-left: 2px !important;
}

主页，项目1和项目2在调整大小时保留在导航栏中，导航栏不会断裂。

相关内容

最新更新

热门标签：