Comment pouvez-vous obtenir une barre latérale à largeur fixe et une zone de contenu à largeur fluide dans Twitter Bootstrap ?

Implémentation d'une mise en page à fluide fixe avec Twitter Bootstrap

Malgré la popularité de Twitter Bootstrap, des inquiétudes ont été soulevées quant à sa capacité à créer deux -disposition en colonnes comportant un panneau latéral à largeur fixe et une zone de contenu à largeur fluide.

Solutions possibles :

Solution originale (Bootstrap v1.0)

En utilisant une combinaison de HTML et CSS modifiés, il est possible d'obtenir une mise en page fluide fixe dans Bootstrap v1.0. Le code mis à jour est le suivant :

<div class="container-fluid fill">
    <div class="row-fluid">
        <div class="fixed">  <!-- Fixed width -->
            ...
        </div>
        <div class="hero-unit filler">  <!-- Removed spanX class -->
            ...
        </div>
    </div>
</div>

.fixed {
    width: 150px;  /* Fixed width */
    float: left;
}

.fixed + div {
    margin-left: 150px;  /* Match fixed width */
    overflow: hidden;
}

/* CSS to ensure sidebar and content are same height (optional) */

html, body {
    height: 100%;
}

.fill { 
    min-height: 100%;
    position: relative;
}

.filler::after{
    background-color:inherit;
    bottom: 0;
    content: "";
    left: 0;
    margin:inherit;
    min-height: 100%;
    position: absolute;
    top: 0;
    width: inherit;
    z-index: -1;  
}

Solution mise à jour (Bootstrap v2.0)

La suppression de la classe ".container-fluid" dans Twitter Bootstrap v2.0 rendait la solution originale incompatible. Cependant, de légères modifications CSS permettent la mise en œuvre d'une mise en page fluide fixe à deux colonnes :

.fixed {
    width: 150px;  /* Fixed width */
    float: left;
}

.fixed + div {
    margin-left: 150px;  /* Match fixed width */
    overflow: hidden;
}

Assurer une hauteur égale pour la barre latérale et le contenu

Bien que cela ne soit pas nécessaire , il est souvent souhaitable de s'assurer que les colonnes de la barre latérale et de contenu ont la même hauteur. Ceci peut être réalisé en ajoutant une classe ".filler" à la colonne fluid-width et en utilisant le pseudo-sélecteur ::after pour ajouter un élément de remplissage qui semble remplir l'espace restant.

.filler::after {
    background-color: inherit;
    bottom: 0;
    content: "";
    height: 100%;
    left: 150px;  /* Match fixed width */
    position: absolute;
    top: 0;
    width: 100%;
    z-index: -1;  
}

Remarques :

• Pour une disposition fluide-fluide, définissez ".container-fluid" pour avoir une hauteur minimale de 100%.
• Pour avoir l'élément de remplissage sur le côté gauche de la page, modifiez « left : 150px ; » à "droite : 0 ;".

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!