Comment créer une mise en page pleine hauteur à deux colonnes dans Bootstrap 3 ?

Bootstrap 3 Disposition à deux colonnes pleine hauteur

Problème :

Création d'un -la disposition en colonnes avec pleine hauteur dans Bootstrap 3 pose un défi en raison du manque de support natif pour ce problème particulier mise en page.

Solution :

Bien que les classes Bootstrap 3 à elles seules ne puissent pas y parvenir, nous pouvons utiliser CSS pour implémenter une solution de colonne pleine hauteur personnalisée à l'aide de CSS tableaux.

HTML :

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

Explication :

Cette solution utilise des tables CSS pour obtenir l'effet pleine hauteur. L'élément .container est défini pour afficher : table et l'élément .row pour afficher : table-row. Les éléments de colonne (.col-md-3 et .col-md-9) sont configurés pour afficher : table-cell et float : none, ce qui supprime le comportement flottant par défaut.

Ajustements réactifs

Pour garantir un comportement réactif, vous pouvez modifier le CSS pour des points d'arrêt spécifiques. Par exemple, vous pouvez utiliser une requête multimédia pour appliquer uniquement les propriétés d'affichage du tableau pour les largeurs d'écran moyennes et supérieures.

Classe personnalisée :

Pour éviter de modifier la colonne Bootstrap native classes, nous utilisons une classe personnalisée (no-float) dans le balisage et appliquons uniquement les styles de table CSS à celle-ci. classe.

Considérations :

• Le rapport 1:3 est codé en dur dans le CSS. Pour les autres ratios, vous devez ajuster le remplissage.
• Pour les colonnes pleine hauteur sur toutes les tailles d'écran, supprimez les classes de colonnes Bootstrap 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!