如何使引導程序網格重疊

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文本，並添加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>

Answer 2

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> 

Answer 3

只是改變了類.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> 

OR

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