Comment créer des colonnes pleine hauteur dans Bootstrap 3 à l'aide de CSS personnalisé ?

Bootstrap 3 colonnes pleine hauteur : une solution CSS personnalisée

Introduction :

Création les mises en page pleine hauteur avec Twitter Bootstrap 3 peuvent être difficiles. Bien que les classes natives de Bootstrap ne prennent pas en charge cette fonctionnalité, il est possible d'obtenir cet effet en utilisant du CSS personnalisé.

Approche CSS personnalisée :

1. Paramètre 100 % de hauteur :
   Réglez la hauteur des éléments de corps, de conteneur et de rangée à 100 % pour vous assurer qu'ils couvrent toute la hauteur de la fenêtre d'affichage.
2. Affichage sous forme de tableau :
   Convertissez l'élément conteneur en tableau à l'aide de display: table. Cela permet au contenu du conteneur d'être organisé dans une structure tabulaire.
3. Cellule flottante :
   Ajoutez une classe personnalisée, telle que no-float, à la colonne de navigation. Définissez cette classe pour qu'elle ait display: table-cell et float: none. Cela empêchera la colonne de navigation de flotter et lui permettra de s'aligner verticalement avec la colonne de contenu.

Marquage :

<header>Header</header>
<div class="container">
    <div class="row">
        <div class="col-md-3 no-float">Navigation</div>
        <div class="col-md-9 no-float">Content</div>
    </div>
</div>

CSS :

html, body, .container {
    height: 100%;
}
.container {
    display: table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; 
}
.row {
    height: 100%;
    display: table-row;
}
.row .no-float {
    display: table-cell;
    float: none;
}

Avantages et Considérations :

• Cette solution CSS personnalisée fournit une mise en page pleine hauteur compatible avec Bootstrap 3.
• Le rapport 1:3 entre la navigation et le contenu peut être ajusté en modifier les largeurs de colonnes dans le CSS.
• Cependant, il est important d'utiliser la classe personnalisée (par exemple, no-float) au lieu de modifier Classes de colonnes natives de Bootstrap pour éviter les conflits.

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!