用引導程序導航

Question

我用Twitter-Bootstrap創建了一個導航欄，但我遇到了導航問題。 我想創建導航，其中nav位於左側，我的徽標位於右側。我用vertical-align：middle創建了.nav-head-middle div;並顯示：inline-block;以便我的導航和徽標位於同一行（，即中間的）。

我的導航和標誌位於同一行，但我的問題是我的標誌不在右側。

---

HTML

<div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 
     <div class="nav-head-middle"> 
      <ul class="nav navbar-nav nav-adelva"> 
       <li><a href="#">HOME</a></li> 
       <li><a href="#">ABOUT US</a></li> 
       <li><a href="#">SERVICES</a></li> 
       <li><a href="#">PARTNERS</a></li> 
       <li><a href="#">CLIENTS</a></li> 
       <li><a href="#">NEWS</a></li> 
       <li><a href="#">CAREER</a></li> 
       <li><a href="#">CONTACT</a></li> 
      </ul> 
     </div> 
     <div class="nav-head-middle"> 
       <div class="navbar-right"> 
       <img src="image/logo.png" /> 
       </div> 
     </div> 
    </div> <!--/container --> 
</div> <!--/navbar --> 

CSS

.nav-head-middle{ 
    display:inline-block; 
    vertical-align:middle; 
    } 

Answer 1

你的問題可能存在於不指定第一組導航選項卡到左浮動。

在CSS中，您需要告訴左邊的部分「向左」，右邊的部分「向右走」。

對於您的情況，使用引導程序時，應該使用內置代碼來創建額外的自定義CSS。應該幫助的類中的構建是「navbar-left」和「navbar-right」。

不知道這HTML會爲你工作或是否會有助於澄清你的麻煩，但我認爲的HTML代碼應該接近這個：

<div class="navbar navbar-default navbar-fixed-top" role="navigation"> 
    <div class="container"> 

      <ul class="nav nav-navtabs navbar-left"> 
      <li><a href="#">HOME</a></li> 
      <li><a href="#">ABOUT US</a></li> 
      <li><a href="#">SERVICES</a></li> 
      <li><a href="#">PARTNERS</a></li> 
      <li><a href="#">CLIENTS</a></li> 
      <li><a href="#">NEWS</a></li> 
      <li><a href="#">CAREER</a></li> 
      <li><a href="#">CONTACT</a></li> 
      </ul> 

      <ul class="nav nav-tabs navbar-right"> 
      <li><img src="image/logo.png" /></li> 
      </ul> 

    </div> <!--/container --> 
</div> <!--/navbar -->