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/..]大小每个容器宽度方向，并添加根据您的需要进行响应。