Bootstrap表單內聯不起作用

我試圖在應用表單內聯類時添加這個簡單的搜索表單，以便控件顯示爲彼此相鄰，但是我獲得的控件顯示在對方上方，並且搜索底部顯示爲白色，看起來很奇怪，所以有人可以告訴我我在這裏失蹤了什麼？Bootstrap表單內聯不起作用

<div class="container"> 
    <div class="row"> 
      <div class="col-md-8"> 
       <form class="form-inline" action="#" method="post"> 
        Search<input type="text" id="search" name="search" class="input-small" placeholder="Search..."> 
        <select id="searchon" name="searchon"> 
         <option value="0">First Name</option> 
         <option value="1">Last Name</option> 
        </select> 
        <button type="submit" class="btn">Search</button> 
       </form>  
      </div>  
    </div> 
</div>

來源

2014-01-09 MChan

什麼版本的引導2或3的？ –

其3 ..你可以看到像「col-md-8」這樣的課程名稱。 – Kumar

bootstrap latest（昨天剛剛下載）所以我相信3 – MChan

從自舉參考，for inline forms :

這僅適用於多種形式的有至少768px 寬視口內。

，並儘可能您的佈局而言，

<div class="container"> 
    <div class="row"> 
      <div class="col-md-8"> 
       <form class="form-inline" action="#" method="post"> 
        Search<input type="text" id="search" name="search" class="input-small" placeholder="Search..."> 
        <select id="searchon" name="searchon"> 
         <option value="0">First Name</option> 
         <option value="1">Last Name</option> 
        </select> 
        <button type="submit" class="btn">Search</button> 
       </form>  
      </div>  
    </div> 
</div>

其完美fine..inline：

working demo

來源

2014-01-09 10:51:21 NoobEditor

這很奇怪，可能是瀏覽器問題？！但是我在Chrome和Firefox上測試了它，在Windows和Linux機器上也得到了相同的結果:(你認爲可能導致這種奇怪行爲的任何可能的原因？ – MChan

@MChan：請檢查你擁有的所有瀏覽器中的小提琴，然後評論回到這裏，如果問題仍然存在..我不認爲它的瀏覽器問題，因爲BS是跨瀏覽器！ – NoobEditor

我曾與從引導代碼段類似的問題。我發現2班'控制組'和'控制'打破了內聯。刪除了2個類爲我修復它。

<div class="control-group"> 
      <label class="control-label" for="Name">Name</label> 
      <div class="controls"> 
       <input type="text" id="Name" placeholder="Name"> 
      </div> 
     </div>

到：

  <label class="control-label" for="Name">Name</label> 

       <input type="text" id="Name" placeholder="Name">

來源

2015-04-08 11:22:55 learnerplates

Bootstrap表單內聯不起作用

回答

相關問題