css - 如何使 Bootstrap 网格重叠

Question

我目前正在制作一个页面，该页面将显示客户列表，并将有一个用于添加新客户的按钮。我希望添加新客户的按钮与页眉一致，但保留页眉中当前已经存在的格式(下划线)。

这就是我想要的样子:

我试过了，但无法让它们重叠: https://jsfiddle.net/2ys2zp8z/

<div class="row">
  <div class="col-lg-12">
    <h1 class="page-header">Customers</h1>
  </div>
  <div class="col-lg-2 col-lg-push-10 text-right">
    <a class="btn btn-primary">New Customer</a>
  </div>
</div>

Answer 1

您可以将 a 标签移动到 h1 内部，并像这样给它 pull-right 类

@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css);

<div class="row">
  <div class="col-lg-12">
    <h1 class="page-header">
      Customers
      <a class="btn btn-primary pull-right">New Customer</a>
    </h1>
  </div>
</div>

<div class="row">
  <div class="col-lg-12">
    <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
      <thead>
        <tr>
          <th>Rendering engine</th>
          <th>Browser</th>
          <th>Platform(s)</th>
          <th>Engine version</th>
          <th>CSS grade</th>
        </tr>
      </thead>
      <tbody>
        <tr class="odd gradeX">
          <td>Trident</td>
          <td>Internet Explorer 4.0</td>
          <td>Win 95+</td>
          <td class="center">4</td>
          <td class="center">X</td>
        </tr>
        <tr class="even gradeC">
          <td>Trident</td>
          <td>Internet Explorer 5.0</td>
          <td>Win 95+</td>
          <td class="center">5</td>
          <td class="center">C</td>
        </tr>
        <tr class="odd gradeA">
          <td>Trident</td>
          <td>Internet Explorer 5.5</td>
          <td>Win 95+</td>
          <td class="center">5.5</td>
          <td class="center">A</td>
        </tr>
        <tr class="even gradeA">
          <td>Trident</td>
          <td>Internet Explorer 6</td>
          <td>Win 98+</td>
          <td class="center">6</td>
          <td class="center">A</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

或者您可以将 h1 中的文本用一个 span 包裹起来，并向其添加 pull-left，同时添加 text-right 类到 h1。

@import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css);

<div class="row">
  <div class="col-lg-12">
    <h1 class="page-header text-right">
      <span class="pull-left">Customers</span>
      <a class="btn btn-primary">New Customer</a>
    </h1>
  </div>
</div>

<div class="row">
  <div class="col-lg-12">
    <table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
      <thead>
        <tr>
          <th>Rendering engine</th>
          <th>Browser</th>
          <th>Platform(s)</th>
          <th>Engine version</th>
          <th>CSS grade</th>
        </tr>
      </thead>
      <tbody>
        <tr class="odd gradeX">
          <td>Trident</td>
          <td>Internet Explorer 4.0</td>
          <td>Win 95+</td>
          <td class="center">4</td>
          <td class="center">X</td>
        </tr>
        <tr class="even gradeC">
          <td>Trident</td>
          <td>Internet Explorer 5.0</td>
          <td>Win 95+</td>
          <td class="center">5</td>
          <td class="center">C</td>
        </tr>
        <tr class="odd gradeA">
          <td>Trident</td>
          <td>Internet Explorer 5.5</td>
          <td>Win 95+</td>
          <td class="center">5.5</td>
          <td class="center">A</td>
        </tr>
        <tr class="even gradeA">
          <td>Trident</td>
          <td>Internet Explorer 6</td>
          <td>Win 98+</td>
          <td class="center">6</td>
          <td class="center">A</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>