Вложенные столбцы слишком малы в bootstrap 3

Question

Когда я пытаюсь вставить два столбца col-md-2 внутри столбца col-md-4, вложенные столбцы слишком малы, больше похожи на md-1 или меньше. Я использовал строку внутри внешнего тега, как предложено documentation. Я попытался изменить все «md» на «lg» и «sm», но это не имело никакого значения. Как я могу сделать, чтобы моя вторая строка вложенных входов совпала с моей первой строкой не вложенных входов?

Скриншот:

Jsfiddle version (resize the result pane so that the controls are beside each other)

<div class="container" id="content"> 
    <form>   
    <div class="row"> 
     <div class="col-md-2">Label 
      <input value="nonnested input"> 
     </div> 
     <div class="col-md-2">Label 
      <input value="nonnested input"> 
     </div> 
    </div> 
    <br/> 
    <div class="row"> 
     <div class="form-group col-md-4"> 
      Label across two inputs, Label across two inputs 
      <div class="row"> 
       <div class="col-md-2"> 
        <input value="nested input 1" > 
       </div> 
       <div class="col-md-2"> 
        <input value="nested input 2" > 
       </div> 
      </div> 
     </div> 
     </div> 
    </form> 
</div> 

Answer 1

Ах я получаю сейчас! Вложенные столбцы должны быть равны 12, чтобы заполнить ширину внешнего тега. Поэтому мой второй набор входов должен выглядеть следующим образом:

<div class="form-group col-md-4"> 
    Label across two inputs, Label across two inputs 
    <div class="row"> 
     <div class="col-md-6"> 
      <input value="nested input 1" > 
     </div> 
     <div class="col-md-6"> 
      <input value="nested input 2" > 
     </div> 
    </div> 
</div>