输入组将下一个输入推入下一行

我有一个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

输入组将下一个输入推入下一行

回答

相关问题