ブートストラップの列/グリッドサイジングの問題

Question

テーブルの上に1つのrowに2つのフォームのタイトルを示すブートストラップページがあります。テーブルの左上に表示される2つの入力を持つ2番目のフォームは、親カラム（col-md-8）の全幅を占めています。このカラム幅の約半分を占めるだけです。

私はこれをどのように配置するのがうまくいかないので、スペースが少なくても、同時にタイトル/テーブルの左に揃えられます。ここでは、現在どのように見えるのです（それが唯一のデスクトップ上で使用されるように、これを参照するには、フルページのオプションをご利用してください）：

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

 
<div class="container"> 
 

 
<div class="row"> 
 
    <div class="col-md-8"> 
 
    <h1>Items List</h1> 
 

 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 

 
    <form class="form-horizontal" id="findItems" action="#" method="get" role="form"> 
 
     <input type="hidden" name="action" value="findItems"> 
 
     <table class="table table-bordered"> 
 
     <tr> 
 
      <td><input type="text" class="form-control" name="itemID" id="itemID" placeholder="Shipment ID"></td> 
 
      <td><input type="text" class="form-control datepicker" name="shippingDate" id="shippingDate" data-date-format="dd/mm/yyyy" placeholder="Date Shipped"></td> 
 
      <td class="text-center"> 
 
      <button type="submit" class="btn btn-success">Update All</button> 
 
      </td> 
 
     </tr> 
 
     </table> 
 

 
    </form> 
 

 

 

 
    </div> 
 
    <!-- /.col-md-8--> 
 

 

 
    <div class="col-md-4"> 
 

 
    <div> 
 
     <form class="form-horizontal" id="findMoreItems" action="#" method="get" role="form"> 
 
     <input type="hidden" name="action" value="findMoreItems"> 
 
     <table class="table table-bordered"> 
 
      <tr> 
 
      <td>Shipment ID:</td> 
 
      <td><input type="text" class="form-control" name="shipmentID" id="shipmentID" placeholder="Shipment ID"></td> 
 
      </tr> 
 
      <tr> 
 
      <td>Authority ID:</td> 
 
      <td><input type="text" class="form-control" name="authorityID" id="authorityID" placeholder="Authority ID"></td> 
 
      </tr> 
 
      <tr> 
 
      <td>Ref ID:</td> 
 
      <td><input type="text" class="form-control" name="refID" id="refID" placeholder="Ref ID"></td> 
 
      </tr> 
 
      <tr> 
 
      <td>Serial Number:</td> 
 
      <td><input type="text" class="form-control" name="serialNumber" id="serialNumber" placeholder="Serial #"></td> 
 
      </tr> 
 
      <tr> 
 
      <td colspan="2" class="text-center"> 
 
       <button type="reset" class="btn btn-default">Reset</button> 
 
       <button type="submit" class="btn btn-success">Search</button> 
 
      </td> 
 
      </tr> 
 
     </table> 
 

 
     </form> 
 
    </div> 
 

 
    </div> 
 
    <!-- /.col-md-4--> 
 

 
</div> 
 
<!-- /.row--> 
 

 

 

 

 
<br> 
 

 

 
<div> 
 

 
    <br /> 
 
    <table class="table table-condensed table-striped table-bordered"> 
 
    <thead> 
 
     <th class="text-center" scope="col">Shipment ID</th> 
 
     <th class="text-center" scope="col">Item ID</th> 
 
     <th class="text-center" scope="col">Serial Number</th> 
 
     <th class="text-center" scope="col">Shipped Date</th> 
 
    </thead> 
 
    <tbody> 
 
</tbody> 
 
\t \t \t \t </table> 
 
\t \t 
 
</div> 
 

 
</div><!-- /.container -->

Answer 1

あなたは常にだけスペーサー列を追加することができます。したがって...

<div class="col-md-6"> two table things </div> 
<div class="col-md-2"> empty column for spacing </div> 
<div class="col-md-4"> other table </div>