使用引導類將文本框垂直對齊

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