ブートストラップ表調整

Question

は私のUIはここ

である私のコードは、私は次のようにそれを小さくする調整はどうすればよい

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

のですか？

あなた<th>と<td>要素が広すぎることがないようにするだけBootstrap Gridクラスに入れ

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> 

に感謝します。 出力についてはhttps://www.bootply.com/BLINHddRZVを参照してください。

編集：それはbootstrap4を使用していませんでした。 this号とmdoの返信を確認してください。明らかに、テーブルのグリッドクラスはサポートされなくなりました。