2013-11-28 21 views
11

Ben Bootstrap yeni ve bazı şeyler (bağlantılar, açılır ...) ve bir breadcrumb ile bir navbar oluşturmak istiyorum. Ama bir ekranla sorun var: i satır içi koyabilirsiniz nasılBootstrap içinde bir navbar içine Breadcrumb 3.0.2

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

: block (i ... düşünmek) i gezinme çubuğu içine bir kırıntı koyduğunuzda, bu benim kod örneği ekmek kırıntısı ve diğer şeyler aynı hatta?

cevap

19

Basit float: left işi yapacak (kenar boşlukları dikey hizalama için buraya şunlardır):

enter image description here

Updated fiddle

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

+0

Thx, geliştirmemle birlikte gerekli olanı ayarladım: http://jsfiddle.net/calamarico/r9yEU/7/embedded/result/ – Kalamarico

3

Bu (Ben de mobil versiyonları için simge hata düzeltildi) benim çözümüm, toogle düğmesiyle çalışır ve div de çöker:

<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> 
"Btn-default btn-xs btn", sınıf bağlamak, sadece ekleyin:

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

Çok BTN çalışır:

sadece bağlantı itiraz değiştirmek için css düzenlemeniz gerekir.

İlgili konular