Bootstrap 3: il testo a sinistra ea destra nella pagina di intestazione

Question

Sto cercando di fare una semplice intestazione con bootstrap 3. Ecco il codice:

<div class="page-header"> 
    <h1>Text on the left</h1> 
    <h3 class="text-right">This to the right but on the same line</h3> 
</div> 

Ecco un jsfiddle da provare: http://jsfiddle.net/DTcHh/2450/

In pratica voglio solo avere un testo a sinistra ea destra all'interno dello page-header, ma sulla stessa riga.

I normali trucchi float:left usando e float:right come con normale html "rompere" il page-header, cioè il testo viene allineato correttamente ma apparirà per (sotto) la pagina-header, che rimane vuoto.

Eventuali indizi?

Answer 1

è possibile utilizzare "pull-destra" e "pull-sinistra" classi, con classe "clearfix" dopo.

<div class="page-header"> 
    <div class="pull-left"> 
    <h1>Text on the left</h1> 
    </div> 
    <div class="pull-right"> 
    <h3 class="text-right">This to the right but on the same line</h3> 
    </div> 
    <div class="clearfix"></div> 
</div> 

inoltre è possibile regolare l'altezza linea sul tag h3 nel giusto, se si vuole abbinare con h1

Answer 2

se si utilizza Bootstrap, si dovrebbe fare qualcosa di simile

<div class="page-header"> 
<div class="row"> 
<div class="col-md-6"> 
<h1>Text on the left</h1> 
</div> 
<div class="col-md-6"> 
    <h3 class="text-right">This to the right but on the same line</h3> 
</div> 
</div> 
</div> 

se si vuole "stilizzare" la h1, h2, ecc, cambiarlo in "display: block" e dovrete aggiungere un "larghezza" attributo comunque

Answer 3

usa la seguente struttura di posizionare con bootstrap:

<div class= 'container'> 
<div class='row'> 
<div class ='md-col-4'> 
<h1>Text on the left</h1> 
</div> 
<div class = 'md-col-4.col-md-offset-4'> 
<h3 class='text-right'>This to the right but on the same line</h3> 
</div> 
</div> 

pensi al fila come una griglia di tutti di 12. Quindi pugno 4 rimasti 3a. Il 2 ° div è il 3 ° terzo con un offset o un gap di 4 griglia.

http://getbootstrap.com/css/