Comment vider un pied de page vers le bas dans Twitter Bootstrap ?

Vinage du pied de page dans Twitter Bootstrap

Vidage d'un pied de page au bas d'une page est une tâche courante dans la conception Web. Cependant, y parvenir peut s'avérer difficile lors de l'utilisation de frameworks réactifs tels que Twitter Bootstrap.

Comprendre le problème

La nature réactive de Bootstrap peut interférer avec les méthodes traditionnelles de vidage des pieds de page, qui reposent souvent sur sur une hauteur fixe ou des marges inférieures. Par conséquent, le pied de page peut ne pas toujours rester en bas de la page sur différentes tailles d'écran.

Résoudre le problème dans Bootstrap 2.2.1 et versions ultérieures

Bootstrap inclut désormais une solution intégrée pour le vidage du pied de page appelée composant navbar. Pour l'utiliser, ajoutez simplement la classe ".navbar-fixed-bottom" à la barre de navigation :

<div class="navbar navbar-fixed-bottom"></div>

Bootstrap 3.x et 4.x

Pour Bootstrap 3.x et 4.x, la même approche s'applique. Utilisez le composant navbar avec la classe ".fixed-bottom" :

<div class="navbar fixed-bottom"></div>

Pour vous assurer que le contenu de la page n'est pas couvert, pensez à ajouter la règle CSS suivante :

body {
  padding-bottom: 70px;
}

Conclusion

Ces méthodes constituent un moyen efficace de vider le pied de page au bas de la page dans Bootstrap. En utilisant le composant de barre de navigation intégré, vous pouvez créer des dispositions de pied de page réactives et cohérentes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!