引導程序3導航對齊

我使用引導程序3來構建WordPress主題。我有一個標題，主要內容，右側邊欄和頁腳（所以這很簡單，我猜）。引導程序3導航對齊

我遇到以下問題。我試圖將「navbar-brand」與我的內容的同一點對齊。以下圖片更好地解釋了它。我想讓「網站」開始我的白色背景（發佈內容）開始的地方。

就如何實現這一目標的任何想法？我希望在每個支持的屏幕尺寸上從這一點開始。

謝謝。

下面的代碼：

 <nav class="navbar navbar-default navbar-fixed-top" role="navigation"> 
      <div class="container-fluid"> 
      <!-- Brand and toggle get grouped for better mobile display --> 
      <div class="navbar-header"> 
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       </button> 
       <a href="#" class="navbar-brand">TheWebsite</a> 
      </div> 
      <!-- Collect the nav links, forms, and other content for toggling --> 
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
       <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">NEWS</a></li> 
       <li><a href="#">INSPIRATION</a></li> 
       <li><a href="#">RESOURCES</a></li> 
       <li><a href="#">DESIGN</a></li> 
       <li><a href="#">CODE</a></li> 
       <li><a href="#">FREE STUFF</a></li> 
       <li class="dropdown"> 
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">OTHER <b class="caret"></b></a> 
        <ul class="dropdown-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> 
        <li class="divider"></li> 
        <li><a href="#">One more separated link</a></li> 
        </ul> 
       </li> 
       </ul> 
       <form class="navbar-form" role="search"> 
        <div class="form-group"> 
         <input type="text" class="form-control" placeholder="Just type and hit return to search..."> 
        </div> 
       </form>     
      </div><!-- /.navbar-collapse --> 
      </div><!-- /.container-fluid --> 
     </nav>

來源

2014-05-12 Popa Andrei

集'保證金：0 auto'的導航欄元素 –

不工作。已經試過 –

看起來您的導航欄內沒有容器div。只需將navbar的內部包裝到.container div中即可。

像：

<div role="navigation" class="navbar"> 
    <div class="container"> 
    <!-- .navbar content --> 
    </div> 
</div>

來源

2014-05-12 12:22:22 mMoovs

我的導航裏面有一個容器流體。我純粹使用bootstrap網站上發佈的示例。我已經用代碼更新了原始帖子。 –

將.container-fluid類更改爲.container。容器流體沒有定義寬度，所以它始終是100％，而Container的寬度始終是定義的。 – mMoovs

非常感謝，它工作。 –

沒有看到你的代碼，這是不可能知道你做了什麼，但它看起來像你錯過了從導航欄的代碼的容器。我建議在文檔這裏考慮看看：

http://getbootstrap.com/components/#navbar

而且還可以查看該頁面在這裏來源：

http://getbootstrap.com/examples/theme/

它會告訴你，在第二個元素導航欄HTML需要有一個container類應用於它才能使Navbar項目正確對齊。

來源

2014-05-12 12:18:43 edcs

引導程序3導航對齊

回答

相關問題