輸入組將下一個輸入推入下一行

我有一個row分爲兩部分（col-md-5 and col-md-7）。第一部分包含一個問題，第二部分包含6個輸入字段（5個文本輸入和1個選擇框）。輸入組將下一個輸入推入下一行

所以，我把第二部分分成6個字段（col-sm-2）。一切正常。現在我想將input-group-addon添加到兩個文本字段中。但是，當我試圖將input-group添加到該輸入框的父div時，輸入框的大小會增加，並會將所有輸入框（它的旁邊）推送到下一行。

下面的代碼

<div class="row"> 
    <div class="col-md-5"> 
     <p class="text-info">How many PRI"s? How much are you paying per month?</p> 
    </div> 
    <div class="col-md-7"> 
     <div class="form-group"> 
      <div class=" col-sm-2"> 
       <input type="text" value="" name="pri_qty" class="form-control input-sm" placeholder="QTY"> 
      </div> 
      <!-- i want to add input-group to the next input field --> 
      <div class=" col-sm-2"> 
       <input type="text" value="" name="pri_mrate" class="form-control input-sm" placeholder="$/M"> 
      </div> 
      <div class=" col-sm-2"> 
       <select name="pri_competitor_id" class="form-control input-sm"><option selected="selected" value="">Provider</option><option value="1">ALLSTREAM</option><option value="2">BELL</option><option value="3">BV</option><option value="4">CONVERGIA</option><option value="5">DISTRIBUTEL</option><option value="6">ONE CONNECT</option><option value="7">TELSYNERGIE</option><option value="8">TELUS</option><option value="9">VIDEOTRON</option><option value="10">SELECTCOM</option><option value="11">OTHER</option></select> 
      </div> 
      <div class=" col-sm-2"> 
       <input type="text" value="" name="pri_avaya" class="form-control input-sm" placeholder="Avaya"> 
      </div> 
      <div class=" col-sm-2"> 
       <input type="text" value="" name="pri_our_rate" class="form-control input-sm" placeholder="$/M"> 
      </div> 
      <div class=" col-sm-2"> 
       <input type="text" value="" name="pri_install" class="form-control input-sm" placeholder="Setup"> 
      </div> 
     </div> 
    </div> 
</div>

來源

2015-05-13 Kanav

100寬度等於12列..如果你想要更多的內容，它將不止一行 –

從輸入基團的引導文件（http://getbootstrap.com/components/#input-groups）：

不要與其它成分混合

待辦事項不要直接與輸入混合表單組或網格列類210組。

而是將輸入組嵌套到表單組或網格相關元素中。

因此，不是將.input-group-addon添加到您的.col-sm-2中，而是將輸入封裝在另一個div.input-group-addon中。

來源

2015-05-21 21:05:49

輸入組將下一個輸入推入下一行

回答

相關問題