在表中引导多个输入表

Question

我想创建一个包含多个信息列和一个输入的表。 我正在使用bootstrap 3.0。 这是例如： JsFiddle

预期的结果是：

6列：

第一和第二：将字符串输出。

第三将三个输入：Number，Letter，Letter

的其余部分是从三个按钮信息列：A，B，C.

问题是第三列的该尺寸是不匹配其余的列：4，5，6.

是否有可能实现，只有通过更改html？

代码：3行输入

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

当前错误状态：

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>