Comment obtenir des mises en page pleine hauteur à deux colonnes dans Bootstrap 3 ?

Bootstrap 3 Optimisation pleine hauteur à deux colonnes

Dans Bootstrap 3, créer une mise en page pleine hauteur avec deux colonnes peut être un défi. Les classes natives ne prennent pas en charge cela dès le départ. Cependant, nous pouvons l'implémenter en utilisant du CSS personnalisé.

Markup :

<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;
    box-sizing: border-box;
}

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

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

Ce CSS exploite les tables CSS pour créer des colonnes pleine hauteur. La classe '.no-float' empêche l'effondrement des colonnes en raison de la disposition basée sur les flotteurs de Bootstrap.

Considérations supplémentaires :

• Pour maintenir un rapport 1:3 rapport pour les largeurs d'écran moyennes et supérieures, utilisez les fichiers '.col-md-3' et '.col-md-9' classes.
• Si ce rapport est requis pour toutes les largeurs d'écran, envisagez de supprimer les classes de colonnes Bootstrap pour éviter une utilisation inappropriée.
• Les écrans plus petits adoptent par défaut le comportement normal des colonnes Bootstrap, chaque colonne occupant la totalité de la colonne Bootstrap. largeur.

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!