我正在尝试使用bootstrap 3创建一个类似于Udemy的固定导航条顶部。这包含一个左对齐的可折叠下拉菜单。但两次复制navbar-header都不起作用。 CSS不是我的强项。任何方向表示赞赏。如何创建另一个引导程序折叠导航栏按钮？

enter image description here

折叠一个在左，一个在右。

enter image description here

更新

这是我到目前为止所。我希望按钮组项目采用引导程序（带有图标栏）的默认行为，当为较小的显示调整大小时，它位于导航栏的最左角。

<nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <header class="container"> 
    <div class="navbar-header"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
     <span class="sr-only">Toggle navigation</span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     </button>   
    </div> 
    <div class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
     <li class="dropdown"> 
      <div class="btn-group header-dropdown nav navbar-nav"> 
      <button type="button" class="btn btn-success">Select City</button> 
      <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown"> 
       <span class="caret"></span> 
       <span class="sr-only">Toggle Dropdown</span> 
      </button> 
      <ul class="dropdown-menu" role="menu"> 
       <li><a href="#">Chennai</a></li> 
       <li><a href="#">Bangalore</a></li> 
       <li><a href="#">Mumbai</a></li> 
       <li class="divider"></li> 
       <li><a href="#">Others</a></li> 
      </ul> 
      </div> 
     </li> 

     <li><a href="#">Item 1</a></li> 
     <li><a href="#">Item 2</a></li> 
     <li><a href="#">Item 3</a></li> 
     </ul> 
    </div> 
    </header> 
</nav>

来源

2014-04-27 RubyNoobie

为什么你想复制两次导航栏头？ – lagbox

就像我说的，我无能为力:-)我以为'icon-bar'类在'navbar-header'下，所以我不得不复制。 – RubyNoobie

[导航文档的导航栏]（http://getbootstrap.com/components/#navbar） – lagbox

可以使用dropdown打造的“发现”菜单，和一些自定义CSS居中品牌。右边的链接将切换/使用navbar-collapse ..

工作演示小屏幕上崩溃：http://bootply.com/133215

来源

2014-04-27 13:42:48 ZimSystem

由于您尚未提供任何代码，因此很难确定您的项目出了什么问题。你的下拉菜单应该是这个样子，可能是其他的导航栏元素之前刚插入：

<div class="btn-group pull-left"> 
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
    <span class="sr-only">Button text</span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    </button> 

    <ul class="dropdown-menu" role="menu"> 
    <li><a href="#">Action</a></li> 
    <li><a href="#">Another action</a></li> 
    <li><a href="#">Something else here</a></li> 
    <li class="divider"></li> 
    <li><a href="#">Separated link</a></li> 
    </ul> 
</div>

http://getbootstrap.com/components/#btn-dropdowns

来源

2014-04-27 13:27:07 isherwood

如何创建另一个引导程序折叠导航栏按钮？

更新

回答

相关问题