Twitter bootstrap 3 navbar navbar-right outside navbar-collapse [英] Twitter bootstrap 3 navbar navbar-right outside navbar-collapse

问题描述

在Twitter bootstrap 2.3.2我可以有像：
http://jsfiddle.net/aQwUZ/3/

In Twitter bootstrap 2.3.2 I can have something like: 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>

A twitter bootstrap navbar在移动响应视图中，固定链接在标题中保持可见。

A twitter bootstrap navbar, where in mobile responsive view, "Fixed Link" stay visible in header.

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

Now, in bootstrap 3, after upgrade my code, I can only have: 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行...
我试图换行在navbar-header节点 http： /jsfiddle.net/EC3Ly/5/ 或在第一个navbar-header中未成功。

in mobile responsive view, I get 2 lines... I tried to wrap in a "navbar-header" node http://jsfiddle.net/EC3Ly/5/ or in the first "navbar-header" without success.

我错过了什么？

感谢，

Alexandre

Alexandre

推荐答案

移动导航栏中的两行是由navbar-header的clearfix引起的：

The two lines in the mobile navbar are caused by the clearfix of the navbar-header:

.navbar-header {
  .clearfix();

  @media (min-width: @grid-float-breakpoint) {
    float: left;
  }
}

您可以使用媒体查询和CSS撤销此修复程序（并在折叠的下拉菜单之前添加一个新的）

You could use media queries and css to undo this clearfix (and add a new before the collapsed dropdown)

.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;}
}

}

demo： http://bootply.com/82366

媒体查询还在右边的小屏幕上添加一个右边的浮动。要在生产中使用这个代码，你也许会修复边界和可能的navbar css转移。

The media queries also add a float right for the navbar-right on smaller screens. To take this code in production, you maybe will fix the borders and possible the navbar css transisions too.

这篇关于Twitter bootstrap 3 navbar navbar-right outside navbar-collapse的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！