Comment créer une mise en page à 2 colonnes à fluide fixe avec Twitter Bootstrap ?

Comment implémenter une mise en page à 2 colonnes à fluide fixe avec Twitter Bootstrap

Arrière-plan

Création d'une mise en page à 2 colonnes avec une largeur fixe Une colonne et une colonne de largeur fluide constituent un modèle de conception courant. Les versions antérieures de Twitter Bootstrap permettaient cela en utilisant la classe .container-fluid, mais cela n'est plus pris en charge dans Bootstrap 2.0 et versions ultérieures.

Solution

Pour résoudre ce problème, nous pouvons utiliser une combinaison de CSS et code HTML légèrement modifié :

HTML

<div class="container-fluid fill">
    <div class="row-fluid">
        <div class="fixed">...Fixed Column...</div>
        <div class="hero-unit filler">...Fluid Column...</div>
    </div>
</div>

CSS

/* Fixed-Fluid Layout CSS */

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

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

/* Content Height Equalization CSS (optional) */

html, body {
    height: 100%;
}

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

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

Notes

• Ajustez la largeur .fixed à votre guise taille de colonne fixe.
• Pour afficher la colonne fluide à gauche, remplacez right: 0 par left: 0 dans le CSS .filler.
• Le CSS supplémentaire est facultatif mais garantit que le CSS fixe et les colonnes de fluide ont la même hauteur.

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!