0
我有一个Bootstrap页面,在一张表格上方的单个row
中显示带有2个窗体的标题。带有2个输入的第二种形式出现在表格的左上角,占据了父列的整个宽度(col-md-8) - 它只需占据该列宽度的一半左右。Bootstrap列/网格大小问题
我无法弄清楚如何定位,所以它占用较少的空间,但仍然与标题/表格的左侧同时对齐。下面是它目前的样子(请确保您使用完整的页面选项,看看这个,因为它会在桌面上才能使用):
<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 -->
使用偏移Class =“col-md-4 col-md-offset-4”,所以你的列很大4并移位了4 –