ブートストラップテーブルの要素が適切にアライメントされていません

Question

テーブルがあり、その要素の1つが適切にアライメントされていません。

group-addon = radio + textボックスが必要ですが、コンポーネントが正しく配置されていません。

</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

あなたの入力は独自のグループに分離する必要がある - ：ここで

はコードです。

代わりに、すべてが1 <div class="input-group">にラップされずに、彼らのようなものに分離する必要があります：私は上記に加えた変更は、要素や個別の各入力から追加class="form-control"を削除（および含ま

<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> 

ラベル）を自分のinput-groupコンテナに入れます。 （あなたがラジオ要素のinput-group-addonを使用していないので、本当に最初のものは全くinput-groupクラスを必要としない）

そこからあなたのサイズに各コンテナの幅方向に必要なブートストラップcol-[lg/md/sm/..]を追加し、追加することができますあなたの必要性に応じた応答性。