Bootstrap表调整

Question

这是我的用户界面

这是我的代码

<div class="container">  
   <table id="headerTable" class="table table-bordered ">
     <thead class="thead-default">
       <tr>
        <th colspan="2">電文Header</th>
       </tr>
     </thead>
     <tbody>
        <tr>
            <th>Filler1</th>
            <td><input id="123" type="text" class="input-sm"></td>
        </tr>  
        <tr>
            <th>MessageType</th>
            <td><input id="123" type="text" class="input-sm"></td>
        </tr>
        <tr>
            <th>MessageLength</th>
            <td><input id="123" type="text" class="input-sm"></td>
        </tr>
     </tbody>
  </table>
</div>

如何调整以使其变小如下？

谢谢

Answer 1

<div class="container"> 
<table id="headerTable" class="table table-bordered ">
    <thead class="thead-default">
        <tr>
            <th colspan="2">電文Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th class="col-sm-1">Filler1</th>
            <td class="col-sm-11"> 
                <input id="123" type="text" class="input-sm">
            </td>
        </tr>             
        <tr>
            <th class="col-sm-1">MessageType</th>
            <td class="col-sm-11"> 
                <input type="text" class="input-sm">
            </td>
        </tr>
        <tr>
            <th class="col-sm-1">MessageLength</th>
            <td class="col-sm-11"> 
                <input type="text" class="input-sm">
            </td>
        </tr>
    </tbody>
</table>

只需加入Bootstrap Grid课程，即<th>和<td>元素不会太宽。 有关输出，请参阅https://www.bootply.com/BLINHddRZV。

编辑：没看到它正在使用bootstrap4。请检查this问题和mdo的回复。显然，表格不再支持网格类。