html - Bootstrap 列/网格大小问题

Question

我有一个 Bootstrap 页面，在表格上方的单个 行 中显示一个标题和 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>
		  		</table>
		
</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>