Bootstrap表元素沒有正確對齊

Question

我有一個表，其中一個元素沒有正確對齊。

我需要一個group-addon = radio +文本框，但組件未正確對齊。

下面是代碼： -

</td> 
       <!--<td>Ticket #--> 
       <td>      
        <div class="input-group"> 
         <div class="input-group" style="text-align:center"> 
          <label class="radio-inline" for="radio1" class="form-control"> 
          <input type="radio" id="radio1" name="tkt-radio" value='JIRA' class="form-control"></label> 
          <span class="input-group-addon">-</span> 
          <input class="form-control" id="ticket_no" width="10%" placeholder="Ticket Number" class="form-control">   
         </div> 
        </div> 
       </td> 

輸出：

Answer 1

你輸入需要分離到自己的羣組。

相反一切的被包裹在一個<div class="input-group">它們應該被分離成這樣的：

<div class="input-group" style="text-align:center"> 
    <label for="radio1" > 
    <input type="radio" id="radio1" name="tkt-radio" value='JIRA' class="form-control"> 
    </label> 
</div> 
<div class="input-group"> 
    <span class="input-group-addon">-</span> 
    <input class="form-control" id="ticket_no" placeholder="Ticket Number"> 
</div> 

我已經於上述包括刪除從所述元件和單獨的每個輸入端的附加class="form-control"所作的改變（和標籤）放入他們自己的input-group容器中。 （真的是因爲你不使用input-group-addon的無線電元件的第一個不需要input-group類的話）

從那裏，你可以添加必要的引導col-[lg/md/sm/..]大小每個容器寬度方向，並添加根據您的需要進行響應。