テーブル内に複数入力フォームをブートストラップ

Question

複数の情報カラムと1つの入力を持つテーブルを作成したいとします。 私はブートストラップ3.0を使用しています。 これは例である： JsFiddle

期待される結果である：

第1及び第2：

6列の文字列出力であろう。

は、三つの入力のようになります。問題は、3番目の列のサイズであることであるA、B、C

：Number、Letter、Letter

残り三つのボタンからの情報列であります残りの列と一致しません：4、5、6

htmlを変更するだけで実現できますか？

コード：

<form class="form-inline" role="form"> 
    <div class="form-group"> 
     <label class="sr-only" for="exampleInputEmail2">Email number</label> 
     <input class="form-control" id="exampleInputEmail2" placeholder="Enter number" type="number"> 
    </div> 

入力の3行と現在の間違った状態：

Answer 1

フォーム用display:table-cell;を使用してみてください、とあなたが必要として、入力の幅を調整し、このような何か：

.form-inline .form-control { 
 
    width: 50px; 
 
    display:table-cell; 
 
} 
 

 
.form-group{ 
 
    display:table-cell; 
 
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 

 
<table class="table table-striped table-advance table-hover"> 
 
    <tbody> 
 
     <tr> 
 
      <td>John </td> 
 
      <td>Doe</td> 
 
      <td> 
 
       <form class="form-inline" role="form"> 
 
        <div class="form-group"> 
 
         <label class="sr-only" for="exampleInputEmail2">Email number</label> 
 
         <input class="form-control" id="exampleInputEmail2" placeholder="Enter number" type="number"> 
 
        </div> 
 
        <div class="form-group"> 
 
         <label class="sr-only" for="exampleInputEmail2">Enter Letter</label> 
 
         <input class="form-control" id="exampleInputEmail2" placeholder="Enter Letter" type="number"> 
 
        </div> 
 
        <div class="form-group"> 
 
         <label class="sr-only" for="exampleInputPassword2">Code Key</label> 
 
         <input class="form-control" id="exampleInputPassword2" placeholder="Key" type="text"> 
 
        </div> 
 
       </form> 
 
      </td> 
 
      <td> 
 
       <div class="btn-row"> 
 
        <div class="btn-group" data-toggle="buttons"> 
 
         <label class="btn btn-default active"> 
 
         <input name="options" id="option1" type="radio"> A 
 
         </label> 
 
         <label class="btn btn-default"> 
 
         <input name="options" id="option2" type="radio"> B 
 
         </label> 
 
         <label class="btn btn-default"> 
 
         <input name="options" id="option3" type="radio"> C 
 
         </label> 
 
        </div> 
 
       </div> 
 
      </td> 
 
      <td> 
 
       <div class="btn-row"> 
 
        <div class="btn-group" data-toggle="buttons"> 
 
         <label class="btn btn-default active"> 
 
         <input name="options" id="option1" type="radio"> A 
 
         </label> 
 
         <label class="btn btn-default"> 
 
         <input name="options" id="option2" type="radio"> B 
 
         </label> 
 
         <label class="btn btn-default"> 
 
         <input name="options" id="option3" type="radio"> C 
 
         </label> 
 
        </div> 
 
       </div> 
 
      </td> 
 
      <td> 
 
       <div class="btn-row"> 
 
        <div class="btn-group" data-toggle="buttons"> 
 
         <label class="btn btn-default active"> 
 
         <input name="options" id="option1" type="radio"> A 
 
         </label> 
 
         <label class="btn btn-default"> 
 
         <input name="options" id="option2" type="radio"> B 
 
         </label> 
 
         <label class="btn btn-default"> 
 
         <input name="options" id="option3" type="radio"> C 
 
         </label> 
 
        </div> 
 
       </div> 
 
      </td> 
 
     </tr> 
 
    </tbody> 
 
    tbody> 
 
</table>