Twitter Bootstrap 3.1.1導航欄右側溢出navbar

我正在試用Twitter Bootstrap 3.1.1中的Carousel示例，並且我已經落在了第一個障礙。我想一個右對齊的搜索框添加到導航欄，所以我已經添加以下代碼（我已經包括了一些上下文的現有代碼）：Twitter Bootstrap 3.1.1導航欄右側溢出navbar

<div class="navbar navbar-inverse navbar-static-top" role="navigation"> 
     <div class="container"> 
     <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> 
      <a class="navbar-brand" href="#">Project name</a> 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Home</a></li> 
      <li><a href="#about">About</a></li> 
      <li><a href="#contact">Contact</a></li> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <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 class="dropdown-header">Nav header</li> 
       <li><a href="#">Separated link</a></li> 
       <li><a href="#">One more separated link</a></li> 
       </ul> 
      </li> 
      </ul> 
      <!-- my insertion starts here --> 
      <form class="navbar-form navbar-right" role="search"> 
      <div class="form-group"> 
       <input type="text" class="form-control" placeholder="Search"> 
      </div> 
      </form> 
      <!-- my insertion ends here --> 
     </div> 
     </div> 
    </div>

插入的代碼是取自Twitter組件頁面上的Twitter Bootstrap的「默認導航欄」。我已將它插入到Carousel的導航欄的等同位置，將「navbar-left」更改爲「navbar-right」。不幸的是，搜索框懸浮在導航欄的右側約15-20像素（我也從上面的例子中刪除了提交按鈕，但如果我把它放回去，提交按鈕懸浮在導航欄中一樣的方法）。我在這裏做錯了什麼？

（編輯：包括根據要求整個導航欄部分）

來源

2014-02-21 Damian Walker

你有一個jsfiddle什麼的？ –

不，我下載了文檔並在本地機器上進行了編輯。 –

@DamianWalker能包含所有的navbar html嗎？ – Thunda

您需要將內部容器切換到容器的流體，因此它可以讓div來STRETCH時。檢查了這一點：

http://www.bootply.com/115744

所以這

<div class="navbar navbar-inverse navbar-static-top" role="navigation"> 
      <div class="container"> 
      <div class="navbar-header">

變爲：

<div class="navbar navbar-inverse navbar-static-top" role="navigation"> 
      <div class="container-fluid"> 
      <div class="navbar-header">

編輯哎呦我意外接通你的div以資產淨值。

來源

2014-02-21 14:17:03 Thunda

感謝@Thunda，這很好地完成了這個訣竅。 –

Twitter Bootstrap 3.1.1導航欄右側溢出navbar

回答

相關問題