Comment créer des mises en page pleine hauteur à deux colonnes dans Bootstrap 3 ?

Bootstrap 3 Deux colonnes pleine hauteur : un guide complet

Introduction
Réaliser une disposition de colonnes pleine hauteur dans Bootstrap 3 peut être un défi, car les classes natives ne prennent pas en charge cette fonctionnalité. Cet article explore une solution qui utilise du CSS personnalisé pour créer des colonnes pleine hauteur avec un rapport de 1:3, satisfaisant ainsi le besoin d'une mise en page dans laquelle les deux colonnes s'étendent sur toute la hauteur de la fenêtre.

Marquage HTML
La structure HTML de cette mise en page se compose d'un en-tête, d'un conteneur, d'une ligne et de deux colonnes.

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

Styles CSS
Pour obtenir des colonnes pleine hauteur, nous incorporons du CSS personnalisé qui utilise le display: table; propriété pour créer une table CSS, garantissant que les deux colonnes s'étendent sur toute la hauteur de la fenêtre.

html,body,.container {
    height:100%;
}
.container {
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; /*set left/right padding according to needs*/
    box-sizing: border-box;
}

.row {
    height: 100%;
    display: table-row;
}

.row .no-float {
  display: table-cell;
  float: none;
}

Explication
Les styles CSS définissent ce qui suit :

• html, body et .container sont définis sur height : 100 % ; pour garantir que le contenu remplit toute la fenêtre d'affichage.
• .container est configuré avec display: table; pour créer une table CSS.
• .row définit la propriété d'affichage sur table-row pour créer une ligne dans la table CSS.
• .row .no-float définit display: table-cell sur faire en sorte que les colonnes se comportent comme des cellules de tableau dans la ligne.
• float : aucun ne remplace le comportement flottant par défaut de Bootstrap pour le colonnes.

Personnalisation

• Modifiez la valeur de la marge supérieure sur .container pour ajuster la marge supérieure de l'en-tête.
• Modifier les valeurs de remplissage sur .container pour définir l'espacement gauche/droite du colonnes.
• Supprimez les classes col-md-* des colonnes pour créer un rapport fixe de 1:3 sur toutes les largeurs d'écran.

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!