вход-группа подталкивает следующие входы к следующему ряду

Question

У меня есть row, разделенный на две части (col-md-5 and col-md-7). Первая часть содержит вопрос, а вторая часть имеет 6 полей ввода (5 текстовых входов и 1 selectbox).

Итак, я разделил вторую часть на 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> 

`

Answer 1

Из начальной загрузки документации на входных групп (http://getbootstrap.com/components/#input-groups):

Не смешивать с другими компонентами

Do не смешивать группы форм или классы столбцов сетки непосредственно с вводом групп.

Вместо этого вставьте группу ввода внутри группы формы или связанного с сеткой элемента.

Таким образом, вместо добавления .input-group-addon к вашему .col-sm-2, оберните ввод в другой div.input-group-addon.