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类，因为你没有使用input-group-addon作为无线电元素）

从那里，您可以添加必要的引导程序col-[lg/md/sm/..]以按宽度方式调整每个容器的大小，并根据您的需要添加响应性。