Wie Bootstrap Grid überlappen

Question

Ich mache derzeit eine Seite, die eine Liste der Kunden angezeigt wird, und wird eine Schaltfläche zum Hinzufügen neuer Kunden haben. Ich möchte, dass die Schaltfläche neue Kunden hinzufügt, um mit der Seitenüberschrift übereinzustimmen, aber behalten Sie die Formatierung (Unterstreichung) bei, die derzeit bereits in der Seitenüberschrift vorhanden ist.

Dies ist, was ich will es so aussehen:

ich das versucht, aber sie nicht bekommen zu überlappen: 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

Sie können entweder die a Tag bewegen innerhalb der h1 und geben Sie die pull-right Klasse wie so

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

oder Sie können den Text in den h1 mit einer Spannweite wickeln und pull-left, um es hinzuzufügen, während auch text-right Klasse zum h1 hinzufügen.

@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 sehen die Arbeits Geige

<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

nur die Klasse ändern .col-lg-12 to .col-lg-10 und .col-lg-12 to .col-lg-2 so ähnlich.

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> 

ODER

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