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

Réalisation de dispositions à deux colonnes pleine hauteur dans Bootstrap 3

Bootstrap 3 ne prend pas en charge nativement les dispositions en colonnes pleine hauteur. Cependant, en utilisant du CSS personnalisé et en exploitant les tableaux CSS, nous pouvons reproduire cette fonctionnalité.

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 pertinent

html,body,.container {
    height:100%;
}
.container {
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0;
    box-sizing: border-box;
}

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

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

Explication

Ce code permet d'obtenir des colonnes pleine hauteur et un rapport 1:3 (Navigation:Contenu) pour les largeurs d'écran moyennes et supérieures. Une classe CSS personnalisée (no-float) est utilisée pour empêcher les colonnes de flotter et garantir qu'elles soient affichées sous forme de cellules de tableau.

Considérations

• Colonne native de Bootstrap les classes (col-md-3, col-md-9) sont utilisées pour la réactivité.
• Pour les écrans plus petits (ci-dessous medium), les colonnes reviennent à leur comportement d'amorçage par défaut (chaque colonne occupant 100 % de la largeur).
• Si un rapport 1:3 est requis pour toutes les largeurs d'écran, les classes de colonnes d'amorçage peuvent être supprimées du balisage.

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!