Maison > interface Web > tutoriel CSS > Bootstrap peut-il créer des dispositions de colonnes fixes et fluides ?

Bootstrap peut-il créer des dispositions de colonnes fixes et fluides ?

Barbara Streisand
Libérer: 2024-11-16 03:23:02
original
453 Les gens l'ont consulté

Can Bootstrap Create Fixed and Fluid Column Layouts?

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

Question :

Pouvez-vous implémenter une mise en page à deux colonnes à fluide fixe en utilisant Twitter Bootstrap ?

Solution :

Oui, c'est possible à partir de Bootstrap 2.0 mais nécessite quelques modifications dans l'implémentation de la classe standard. Voici une solution utilisant HTML et CSS :

HTML:

<div class="container-fluid fill">
    <div class="row-fluid">
        <div class="fixed">  <!-- Fixed width div -->
            ...
        </div>
        <div class="hero-unit filler">  <!-- Filler div without spanX class -->
            ...
        </div>
    </div>
</div>
Copier après la connexion

CSS:

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

.fixed + div {
    margin-left: 150px;
    overflow: hidden;
}

/* Equal height columns (optional) */
html, body {
    height: 100%;
}

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

.filler:after{
    background-color:inherit;
    bottom: 0;
    content: &quot;&quot;;
    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

Explication :

  • Ajouter une classe .fill au div le plus à l'extérieur pour garantir une hauteur minimale de 100 %.
  • Flottez la colonne de largeur fixe vers la gauche.
  • Utilisez un pseudo-élément dans .filler pour fournir une illusion visuelle de colonnes de hauteur égale.
  • Positionnez le div de remplissage par rapport au div .fill en utilisant position : relative.

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!

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