Bootstrap 3表格填寫家長

Question

我試圖在Bootstrap 3中編寫導航欄，有一個導航欄和一些品牌和其他東西，其中包括搜索表單 我想要搜索表單填充導航欄中的額外空間，應該怎樣我做？

<div class="navbar navbar-fixed-top"> 
    <div class="container"> 
    <a class="navbar-brand" href="#">Brand</a> 
    <form class="navbar-form pull-left"> 
     <input type="search" class="form-control search-box"> 
     <button type="submit" class="btn btn-default glyphicon glyphicon-search"></button> 
    </form> 
    <div class="navbar-form btn-group pull-right"> 
     <button type="button" class="btn btn-default">User</button> 
     <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"> 
     <span class="caret"></span> 
     </button> 
     <ul class="dropdown-menu"> 
     <li><a href="#">My Account</a></li> 
     <li><a href="#">Another action</a></li> 
     <li><a href="#">Something else here</a></li> 
     <li class="divider"></li> 
     <li><a href="#">Logout</a></li> 
     </ul> 
    </div> 
    </div> 
</div> 

Answer 1

試試這個

<div class="navbar navbar-fixed-top"> 
<div class="navbar-inner"> 
    <div class="container"> 
     <ul class="nav"> 
      <li><a class="brand" href="#">Brand</a></li> 
      <li><a href="#">Nav 2</a></li> 
      <li><a href="#">Nav 3</a></li> 
     </ul> 

     <form class="navbar-search pull-left"> 
      <input type="text" class="search-query" placeholder="Search"> 
     </form> 
     <ul class="nav pull-right"> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">User <b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
        <li><a href="#">My Account</a></li> 
        <li><a href="#">Another action</a></li> 
        <li><a href="#">Something else here</a></li> 
        <li class="divider"></li> 
        <li><a href="#">Logout</a></li> 
       </ul> 
      </li> 
     </ul> 
    </div> 
</div> 

Answer 2

很多已與引導3.改變你需要爲輸入指定的寬度。您可以嘗試像...

<div class="navbar navbar-fixed-top"> 
     <div class="container"> 
     <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse"> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
     </button> 
     <a class="navbar-brand" href="#">Brand</a> 
     <div class="nav-collapse collapse"> 
      <ul class="nav navbar-nav pull-right"> 
      <li class="dropdown"> 
       <a href="#" class="dropdown-toggle" data-toggle="dropdown">User <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="nav-header">Nav header</li> 
       <li><a href="#">Separated link</a></li> 
       <li><a href="#">One more separated link</a></li> 
       </ul> 
      </li> 
      </ul> 
      <form class="navbar-form"> 
      <button type="submit" class="btn btn-default glyphicon glyphicon-search"></button> 
      <input type="search" class="form-control pull-left" style="width:70%;"> 
      </form> 
     </div><!--/.nav-collapse --> 
     </div> 
    </div> 

演示上Bootply：http://bootply.com/70142

Answer 3

因爲你的菜單被固定在上面，你可以使用這樣的事情：

<form class="navbar-form navbar-left" 
     style="display:inline; 
       position:absolute; 
       margin-right: 140px;"> 
    <div class="input-group"> 
     <input type="text" class="form-control"> 
     <span class="input-group-btn"> 
      <button class="btn btn-default" type="button">Search</button> 
     </span> 
    </div> 
</form> 

顯示：內聯使用的絕對位置是直接在您的左側navbar品牌或nav Navbar的導航。引導程序的類表單控件將使用它的100％寬度來填充導航欄的其餘部分和輸入字段。因爲您在表單的右側有一個下拉菜單，所以在右側定義了一個匹配邊距，所以元素不會重疊。

例子：on plunker

它與IE和Chrome可惜不是在Firefox和Safari。想法如何解決這個問題是受歡迎的。