在 Bootstrap3 中将工具栏的末端与 table 的末端对齐

Question

使用 Bootstrap3，我在 table 上方有一个“工具栏”。工具栏有一系列输入字段和按钮。我需要工具栏的 left/right 端与 table.

的端对齐

我尝试使用 Bootstrap 的列类来定位各种工具栏元素。在典型的大型（或更大）显示器上以全屏模式查看时，定位似乎是正确的。

如果我分别从第一个和最后一个 div 中删除左右填充，我就可以将字段和按钮对齐到 table 的末尾。这就是我目前正在做的并且它有效。但我希望在不覆盖默认样式的情况下实现这一目标。我怀疑我缺少一种更简单的方法。

这与我以前使用的有点不同，因为工具栏中有几种不同类型的元素。

 <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>

如有任何建议，我们将不胜感激。

Answer 1

您的代码中有两个元素是多余的。其中之一是 .btn-toolbar（.row 和 Bootstrap 网格列之间的那个），而第二个是 table 元素周围的 .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>

在 Bootstrap3 中将工具栏的末端与 table 的末端对齐

Aligning ends of toolbar with ends of table in Bootstrap3

html

css

twitter-bootstrap-3