问题描述
使用Bootstrap3，我在桌子上方有一个“工具栏”。工具栏具有一系列输入字段和按钮。我需要工具栏的左/右端与表格的两端对齐。
我尝试使用Bootstrap的列类来定位各种工具栏元素。在典型的大（或更大）显示屏上以全屏模式查看时，定位似乎是正确的。
如果我分别从第一个div和最后一个 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container-fluid">
<div class="col-sm-12">
<div class="row">
<div class="btn-toolbar">
<div class="col-sm-2">
<div class="form-group">
<label class="control-label">Start Date</label>
<div>
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label class="control-label">End Date</label>
<div>
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="col-sm-2">
<label class="control-label"> </label>
<div>
<button type="button" class="btn btn-success">
Get Data
</button>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<div>
<label class="control-label">Search</label>
<input type="search" class="form-control" />
</div>
</div>
</div>
<div class="col-sm-1">
<label class="control-label"> </label>
<div>
<button type="button" class="btn btn-success">
Search
</button>
</div>
</div>
<div class="col-sm-3">
<div class="pull-right">
<label class="control-label"> </label>
<div class="btn-toolbar">
<button type="button" class="btn btn-success">Create
</button>
<button type="button" class="btn btn-danger">
Close
</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<table class="table table-condensed table-striped table-bordered">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>删除左侧和右侧填充，则可以将字段和按钮对齐到表格的末尾。这是我目前正在做的并且有效。但是我希望在不覆盖默认样式的情况下实现这一目标。我怀疑有一种更简单的方法会丢失我。
这与我惯用的有点不同，因为工具栏中有几种不同类型的元素。
getBoundingClientRect()任何建议将不胜感激。
解决方法
代码中有两个额外的元素。其中之一是.btn-toolbar（在.row和Bootstrap网格列之间），第二个是.row元素周围的table。
将.row包裹在表格周围是多余的，因为您没有在该行内使用任何列。还要进一步删除.btn-toolbar元素，因为您在此处设置了一些自定义margin-left，这会导致左侧的未对齐。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<div class="container-fluid">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-2">
<div class="form-group">
<label class="control-label">Start Date</label>
<div>
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label class="control-label">End Date</label>
<div>
<input type="text" class="form-control" />
</div>
</div>
</div>
<div class="col-sm-2">
<label class="control-label"> </label>
<div>
<button type="button" class="btn btn-success">Get Data</button>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<div>
<label class="control-label">Search</label>
<input type="search" class="form-control" />
</div>
</div>
</div>
<div class="col-sm-1">
<label class="control-label"> </label>
<div>
<button type="button" class="btn btn-success">Search</button>
</div>
</div>
<div class="col-sm-3">
<div class="pull-right">
<label class="control-label"> </label>
<div class="btn-toolbar">
<button type="button" class="btn btn-success">Create</button>
<button type="button" class="btn btn-danger">Close</button>
</div>
</div>
</div>
</div>
<table class="table table-condensed table-striped table-bordered">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
</div>