麪包屑導入導航欄中的導航欄3.0.2

Question

我是Bootstrap新手，我想創建一個帶有一些東西（鏈接，下拉菜單...）和麪包屑的導航欄。可是我不得不與顯示器的一個問題：塊（我覺得...），當我把麪包屑進入導航欄，這是我的示例代碼：

<nav class="navbar navbar-inverse navbar-static-top" role="navigation"> 
     <div class="container"> 

     <ul class="nav navbar-nav navbar-right"> 
      <ul class="breadcrumb list-inline"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">Library</a></li> 
      <li class="active">Data</li> 
      </ul> 
      <li class="dropdown"> 
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Hello George <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Settings</a></li> 
       <li><a href="#">Logout</a></li> 
      </ul> 
      </li> 
      <li> 
      <span class="glyphicon glyphicon-info-sign icons-padding"></span> 
      </li> 
      <li><a href="#">Help</a></li> 
      <li> 
      <span class="glyphicon glyphicon-off icons-padding"></span> 
      </li> 
      <li><a href="#">Exit</a></li> 
     </ul> 
     </div> 
    </nav> 

http://jsfiddle.net/calamarico/r9yEU/2/embedded/result/

我怎麼可以把內聯麪包屑和其他東西在同一行？

Answer 1

一個簡單float: left就做好了（利潤率這裏垂直取向）：

.nav .breadcrumb { 
    margin: 0 7px; 
} 
@media (min-width: 768px) { 
    .nav .breadcrumb { 
     float: left; 
     margin: 7px 10px; 
    } 
} 

Updated fiddle（我也固定在移動版本的圖標漏洞）

Answer 2

這是我的解決方案，它適用於toogle按鈕並摺疊div：

<nav class="navbar navbar-default" role="navigation"> 
    <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> 
     <!-- this is my custom breadcrumb --> 
     <p class="navbar-text navbar-right"> 
      <!-- a glyphicon as homepage --> 
      <a class="navbar-link" href="#" title="homepage"><span class="glyphicon glyphicon-home icons-padding"></span></a> 
      &nbsp;>&nbsp;&nbsp; 
      <a class="navbar-link" href="#">Link1</a>     
      &nbsp;>&nbsp;&nbsp; 
      <a class="navbar-link" href="#">Link2</a>     
      &nbsp;>&nbsp;&nbsp; 
      <a class="navbar-link" href="#">Link3</a>     
      &nbsp;>&nbsp;&nbsp; 
      Link4 
     </p> 
     <!-- end --> 
    </div> 
    <div class="collapse navbar-collapse"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#"> 
        <span class="glyphicon glyphicon-off icons-padding"> 
        </span> 
        Exit 
       </a> 
      </li> 
     </ul> 
    </div> 
</nav> 

你需要編輯CSS只是修改鏈接呼籲：

a.navbar-link { 
    text-decoration: underline; 
} 

它與BTN太：只需添加，鏈接類， 「BTN BTN-默認BTN-XS」。