html – Twitter bootstrap 3 navbar navbar-right navbar-collapse之外

概述在Twitter bootstrap 2.3.2我可以有类似的东西： http://jsfiddle.net/aQwUZ/3/ <div class="navbar navbar-inverse navbar-fixed-top"> <div class="navbar-inner"> <div class="container"> 在Twitter bootstrap 2.3.2我可以有类似的东西：
http://jsfiddle.net/aQwUZ/3/

<div >        <div >            <div >                <a data-target=".nav-collapse" data-toggle="collapse" >                    <span ></span>                    <span ></span>                    <span ></span>                </a>                <a href="#" >BRAND</a>                <ul >                  <li>                    <a href="#">Fixed link</a>                  </li>                </ul>                <div >                    <ul >                        <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  role="navigation">            <div >                <div >                    <button type="button"  data-toggle="collapse" data-target=".navbar-collapse">                        <span ></span>                        <span ></span>                        <span ></span>                    </button>                    <a  href="#">BRAND</a>                </div>                <ul >                          <li>                            <a href="#">Fixed link</a>                          </li>                </ul>                <div >                    <ul >                         <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”中包装但没有成功.

我错过了什么？

谢谢,

亚历山大

解决方法 移动导航栏中的两行是由navbar-header的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

媒体查询还在较小的屏幕上为导航栏右侧添加了一个浮动.要在生产中使用此代码,您可能会修复边框以及可能的navbar CSS转换.

总结

以上是内存溢出为你收集整理的html – Twitter bootstrap 3 navbar navbar-right navbar-collapse之外全部内容，希望文章能够帮你解决html – Twitter bootstrap 3 navbar navbar-right navbar-collapse之外所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。