вертикально выровнять текстовое поле с помощью классов начальной загрузки

Question

Я сделал 5 строк, используя бутстрап, они были аккуратно размещены, но есть небольшая проблема. Строки контактируют, не оставляя пробелов. Я не должен использовать
, это приведет к большому разрыву, и текстовые поля в каждой строке должны быть выровнены по вертикали, если в этой строке нет переключателя, соответствующее место должно быть пустым, а текстовое поле должно быть правильно выровнено со всеми строками , Начальное текстовое поле во всех строках должно начинаться в том же месте, где началось текстовое поле первой строки. Вот мой код

<div class="container"> 
    <div class="row"> 
     <div class="col-xs-12"> 
      <div class="form-inline"> 
       <div class="radio" style="width: 100px;"> 
        <label><input type="radio" name="optradio">Option 
         1</label> 
       </div> 
       <input type="text" class="form-control" /> 

      </div> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="col-xs-12"> 
      <div class="form-inline"> 
       <div class="radio" style="width: 100px;"> 
        <label><input type="radio" name="optradio">Option 
         1</label> 
       </div> 
       <input type="text" class="form-control" /> <input type="text" 
        class="form-control" /> 
       <div class="form-group"> 
        <label for="sel1">Select list:</label> <select 
         class="form-control" id="sel1"> 
         <option>Apple</option> 
         <option>Mango</option> 
         <option>Orange</option> 
        </select> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="col-xs-12"> 
      <div class="form-inline"> 
       <input type="text" class="form-control" /> <input type="text" 
        class="form-control" /> <input type="text" class="form-control" /> 
       <input type="text" class="form-control" /> <input type="text" 
        class="form-control" /> 
      </div> 
     </div> 
    </div> 
    <div class="row"> 
     <div class="col-xs-12"> 
      <div class="form-inline"> 
       <div class="radio" style="width: 100px;"> 
        <label><input type="radio" name="optradio">Option 
         1</label> 
       </div> 
       <input type="text" class="form-control" /> <input type="text" 
        class="form-control" /> 
       <div class="form-group"> 
        <label for="sel1">Select list:</label> <select 
         class="form-control" id="sel1"> 
         <option>Apple</option> 
         <option>Mango</option> 
         <option>Orange</option> 
        </select> 
       </div> 
      </div> 
     </div> 
    </div> 

    <div class="row"> 
     <div class="col-xs-12"> 
      <div class="form-inline"> 
       <input type="text" class="form-control" /> <input type="text" 
        class="form-control" /> <input type="text" class="form-control" /> 
       <input type="text" class="form-control" /> <input type="text" 
        class="form-control" /> 
      </div> 
     </div> 
    </div> 
</div> 

Пожалуйста, проверьте браузер не в скрипке, потому что он меняет выравнивание.

Answer 1

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-12"> 
 
      <div class="form-inline form-group"> 
 
       <div class="radio" style="width:95px;" > 
 
        <label><input type="radio" name="optradio" style="vertical-align:middle;"> &nbsp; Option 
 
         1</label> 
 
       </div> 
 
       <input type="text" class="form-control" /> 
 

 
      </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <div class="col-xs-12"> 
 
      <div class="form-inline form-group"> 
 
       <div class="radio" style="width:95px;" > 
 
        <label><input type="radio" name="optradio">Option 
 
         1</label> 
 
       </div> 
 
       <input type="text" class="form-control" /> <input type="text" 
 
        class="form-control" /> 
 
       <div class="form-group"> 
 
        <label for="sel1">Select list:</label> <select 
 
         class="form-control" id="sel1"> 
 
         <option>Apple</option> 
 
         <option>Mango</option> 
 
         <option>Orange</option> 
 
        </select> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <div class="col-xs-12 col-md-offset-1"> 
 
      <div class="form-inline form-group"> 
 
      
 
       <input type="text" class="form-control" /> <input type="text" 
 
        class="form-control" /> <input type="text" class="form-control" /> 
 
       <input type="text" class="form-control" /> <input type="text" 
 
        class="form-control" /> 
 
      </div> 
 
     </div> 
 
    </div> 
 
    <div class="row"> 
 
     <div class="col-xs-12"> 
 
      <div class="form-inline form-group"> 
 
       <div class="radio" style="width:95px;"> 
 
        <label><input type="radio" name="optradio">Option 
 
         1</label> 
 
       </div> 
 
       <input type="text" class="form-control" /> <input type="text" 
 
        class="form-control" /> 
 
       <div class="form-group"> 
 
        <label for="sel1">Select list:</label> <select 
 
         class="form-control" id="sel1"> 
 
         <option>Apple</option> 
 
         <option>Mango</option> 
 
         <option>Orange</option> 
 
        </select> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div> 
 

 
    <div class="row"> 
 
     <div class="col-xs-12 col-md-offset-1"> 
 
      <div class="form-inline form-group"> 
 
       <input type="text" class="form-control" /> <input type="text" 
 
        class="form-control" /> <input type="text" class="form-control" /> 
 
       <input type="text" class="form-control" /> <input type="text" 
 
        class="form-control" /> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>

Вот JSFIDDLE