Question

我有一个Bootstrap页面，在页面上方的单个row中显示包含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>

Bootstrap列/网格大小调整问题

1 个答案: