2014-12-19 55 views
1

我想使用Bootstrap CSS在一行中顯示幾個選擇標籤。 我沒有問題連續輸入幾個輸入。但如果我將輸入標籤更改爲選擇,則只顯示第一個選擇。這裏是一個樣本:fiddle多個選擇標籤和引導CSS網格系統

<div class="container-fluid"> 
    <div class="row"> 
     <div class="col-md-2"> 
      <select class="form-control" /> 
     </div> 
     <div class="col-md-2"> 
      <select class="form-control" /> 
     </div> 
    </div> 
    <br /> 
    <div class="row"> 
     <div class="col-md-2"> 
      <input class="form-control" type="text" /> 
     </div> 
     <div class="col-md-2"> 
      <input class="form-control" type="text" /> 
     </div> 
    </div> 
</div> 

我將不勝感激任何幫助。謝謝。

回答

1

只需改變

<select class="form-control" />

<select class="form-control"></select>

實施例:

<div class="container-fluid"> 
 
    <div class="row"> 
 
    <div class="col-md-2"> 
 
     <select class="form-control"></select> 
 
    </div> 
 
    <div class="col-md-2"> 
 
     <select class="form-control"></select> 
 
    </div> 
 
    </div> 
 
    <br/> 
 
    <div class="row"> 
 
    <div class="col-md-2"> 
 
     <input class="form-control" type="text" /> 
 
    </div> 
 
    <div class="col-md-2"> 
 
     <input class="form-control" type="text" /> 
 
    </div> 
 
    </div> 
 
</div>

+0

感謝。這行得通。我可以請你解釋爲什麼這使得選擇不同而不是輸入? – Amid 2014-12-19 10:38:14

+0

輸入標籤是一個自閉標籤或空元素(如img,br,hr,鏈接等),因爲對於選擇它具有開始和結束標記''。你可以在這裏閱讀http://www.w3.org/html/wg/drafts/html/master/syntax.html#void-elements – 2014-12-19 10:46:39

0

您只需在您的<select>一些<option>元素。例如:

<select class="form-control"> 
    <option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
</select> 

參見http://jsfiddle.net/ckuijjer/1x8so5ms/