Đường dẫn vào thanh điều hướng trong bootstrap 3.0.2

Question

Tôi mới sử dụng Bootstrap và tôi muốn tạo thanh điều hướng với một số thứ (liên kết, menu thả xuống ...) và đường dẫn. Nhưng tôi có một vấn đề với màn hình hiển thị: block (tôi nghĩ rằng ...) khi tôi đặt một mẩu bánh mì vào một thanh điều hướng, đây là mã ví dụ của tôi:

<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/

Làm thế nào tôi có thể đặt inline breadcrumb và những thứ khác trong cùng một dòng?

Answer 1

Một đơn giản float: left sẽ làm việc (lợi nhuận đang ở đây để cho sự liên kết dọc):

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

Updated fiddle (Tôi cũng cố định lỗi biểu tượng của bạn trên phiên bản di động)

Answer 2

này là giải pháp của tôi, nó hoạt động với nút quá nhỏ và thu gọn div quá:

<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> 

Bạn cần phải chỉnh sửa css chỉ để thay đổi sự hấp dẫn liên kết:

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

Nó hoạt động với btn quá: chỉ cần thêm, liên kết lớp, "btn btn-mặc định btn-xs".