Sommaire

Les boutons justifiés COMPOSANTS POUR LES BOUTONS:Boutons justifiés

Vous pouvez avoir une largeur de bouton qui remplisse complètement l’élément parent de la barre de bouton. Attention cela ne fonctionne qu’avec des liens <a>.

Dans cet exemple, l’élément parent est une boîte <div> dont la largeur est de 600 pixels. Dans cette boîte, nous utilisons la boîte <div> de la barre des boutons avec une classe supplémentaire : .btn-group-justified. Les trois boutons sont justifiés dans la largeur de la boîte parente <div id="boite">.

Voici le code HTML :

<div id="boite"> 
   <div class="btn-group btn-group-justified"> 
      <a href="#" class="btn btn-default">Introduction</a> 
      <a href="#" class="btn btn-default">Résultats</a> 
      <a href="#" class="btn btn-default">Conclusion</a> 
   </div> 
</div>

Voici l’affichage obtenu :

images/C11-005.png

Voici le style CSS de la boîte parent :

#boite { 
   width: 600px; 
}

Voici le sélecteur utilisé :

.btn-group-justified { 
   display: table; 
   width: 100%; 
   border-collapse: separate; 
   table-layout: fixed; 
}