Maison > interface Web > tutoriel CSS > Comment créer une mise en page à 2 colonnes à fluide fixe avec Twitter Bootstrap ?

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

Barbara Streisand
Libérer: 2024-11-16 11:20:03
original
268 Les gens l'ont consulté

How to Create a Fixed-Fluid 2-Column Layout with 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>
Copier après la connexion

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;  
}
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal