web-dev-qa-db-fra.com

Bootstrap 3: texte à gauche et à droite dans l'en-tête de page

J'essaie de créer un en-tête de page simple avec bootstrap 3. Voici le code:

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

Voici un jsfiddle à essayer: http://jsfiddle.net/DTcHh/2450/

En gros, je veux juste avoir du texte à gauche et à droite dans le page-header, mais sur la même ligne.

Les astuces habituelles consistant à utiliser float:left et float:right comme avec le code HTML normal "cassent" le page-header, ce qui signifie que le texte est correctement aligné mais est affiché à l'extérieur (sous) de l'en-tête de page qui reste vide.

Des indices?

htmltwitter-bootstraptwitter-bootstrap-3
14
Master_T

vous pouvez utiliser les classes "pull-right" et "pull-left", avec la classe "clearfix" après.

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

vous pouvez également ajuster la hauteur de ligne sur le tag h3 à droite, si vous souhaitez faire correspondre le résultat avec h1

32
Darko

si vous utilisez Bootstrap, vous devriez faire quelque chose comme

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

si vous voulez "styliser" les h1, h2, etc., changez-le en "display: block" et vous devrez quand même ajouter un attribut "width"

7
Alex Angelico

utilisez la structure suivante pour positionner avec 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>

Pensez à la ligne comme à une grille sur 12. Donc, le poing 4 reste 3e. La 2ème div est la troisième avec un décalage de grille de 4 ou un écart. 

http://getbootstrap.com/css/

1
Creaven