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类那样提供

＆＃13;

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

＆＃13;

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

＆＃13;

或者您可以使用范围将h1中的文字换行并添加pull-left，同时将text-right类添加到h1。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

只需更改课程.col-lg-12 to .col-lg-10和.col-lg-12 to .col-lg-2 类似的东西。

SEE DEMO

<div class="row">
  <div class="col-lg-10 col-md-10 col-sm-10 col-xs-10">
    <h1 class="page-header">Customers</h1>
  </div>
  <div class="col-lg-2 col-md-2 col-sm-2 col-xs-2">
    <a class="btn btn-primary">New Customer</a>
  </div>
</div>

或

<div class="row"> <div class="col-lg-12"> <h1 class="page-header pull-left">Customers</h1> <a class="btn btn-primary pull-right" style="padding-top: 15px;">New Customer</a> </div> </div>

Answer 3

Updated Fiddle看到工作小提琴

<div class="row">
  <div class="col-lg-12">
    <h1 class="page-header" >Customers
    <a class="btn btn-primary" style="float:right;margin-right:5px;">New Customer</a>

</h1>

  </div>

</div>

如何使引导网格重叠

3 个答案: