在Bootstrap3中将工具栏的两端与表的两端对齐

如何解决在Bootstrap3中将工具栏的两端与表的两端对齐

使用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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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">&nbsp;</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>