2017-01-23 68 views
1

美好的一天傢伙,我在崩潰導航欄中遇到了一些麻煩。當我點擊摺疊按鈕時,它不會與瀏覽器的右側對齊?Twitter Bootstrap 3導航欄崩潰錯誤

<div class="navbar navbar-inverse navbar-static-top"> 

<div class="container"> 

    <a href="#" class="navbar-brand">My Site</a> 

    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 
    <span class="icon-bar"></span> 

    </button> 

    <div class="collapse navbar-collapse navHeaderCollapse"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Contacts</a></li> 


      <li class="dropdown"> 

      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Login<b class="caret"></b></a> 

      <ul class="dropdown-menu"> 
      <li><a href="#">Logout</a></li> 
      <li><a href="#">Logout</a></li> 
      <li><a href="#">Logout</a></li>     

      </ul> 


      </li> 
     </ul> 
    </div> 

</div> 

Sample output

回答

0

你需要用在.navbar-header摺疊按鈕和品牌鏈接:

<div class="navbar navbar-inverse navbar-static-top"> 
<div class="container"> 
    <div class="navbar-header"> 
     <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a href="#" class="navbar-brand">My Site</a> 
    </div> 

    <div class="collapse navbar-collapse navHeaderCollapse"> 
     <ul class="nav navbar-nav navbar-right"> 
      <li><a href="#">Home</a></li> 
      <li><a href="#">About</a></li> 
      <li><a href="#">Contacts</a></li> 

      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Login<b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">Logout</a></li> 
        <li><a href="#">Logout</a></li> 
        <li><a href="#">Logout</a></li>     
       </ul> 
      </li> 
     </ul> 
    </div> 
</div> 
+0

謝謝先生,我會試試這個! :) –

1

必須使用navbar-header,那麼你有brand和漢堡包圖標上相同的級別和該行下面的菜單的全部內容。所以基本上你的代碼看起來應該是這樣的:

<div class="navbar-header"> 
    <a href="#" class="navbar-brand">My Site</a> 

    <button class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse"> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
     <span class="icon-bar"></span> 
    </button> 
</div> 

鏈接到活生生的例子:http://www.bootply.com/jowa705iHl

在這裏你可以找到所有需要的文件:http://getbootstrap.com/components/#navbar

祝您好運:)的

+0

謝謝先生,我會試試這個! :) –

+0

學習Bootstrap的最簡單方法是檢查其網站並閱讀可用文檔。那麼你的工作應該更容易:) – kwiat1990