Comment construire un 2, Colonne (Fixe - Liquide) Mise en page avec Twitter Bootstrap?

Question

Est-il possible de créer un 2 Mise en page en Colonnes (Fixe - Liquide) Mise en page ( http://www.dynamicdrive.com/style/layouts/item/css-liquid-layout-21-fixed-fluid/) avec Twitter Bootstrap (http://twitter.github.com/bootstrap/)?

Avez-vous des solutions?

Answer 1

- Une Autre Mise À Jour -

Depuis Twitter Bootstrap, version 2.0 - qui a vu la suppression de l' .container-fluid classe, il n'a pas été possible de mettre en place une double colonne fixe fluide de mise en page en utilisant simplement le bootstrap classes - toutefois, j'ai mis à jour ma réponse à inclure quelques petits CSS changements qui peuvent être apportés dans votre propre code CSS qui va rendre cela possible

Il est possible de mettre en œuvre un fixe fluide structure à l'aide de CSS ci-dessous et légèrement modifié HTML code pris de Twitter Bootstrap Échafaudage : les mises en page de documentation:

HTML

<div class="container-fluid fill">
    <div class="row-fluid">
        <div class="fixed">  <!-- we want this div to be fixed width -->
            ...
        </div>
        <div class="hero-unit filler">  <!-- we have removed spanX class -->
            ...
        </div>
    </div>
</div>

CSS

/* CSS for fixed-fluid layout */

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

.fixed + div {
     margin-left: 150px;  /* must match the fixed width in the .fixed class */
     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: "";
    height: auto;
    min-height: 100%;
    left: 0;
    margin:inherit;
    right: 0;
    position: absolute;
    top: 0;
    width: inherit;
    z-index: -1;  
}

J'ai gardé la réponse ci-dessous, même si les modifier à l'appui 2.0 fait un liquide-liquide de la solution - comme il explique les concepts de base de la prise de la barre latérale et le contenu de la même hauteur (une partie importante de la askers question identifiés dans les commentaires)

---

Important

Réponse ci-dessous est fluide-fluide

Mise à jour Comme l'a souligné @JasonCapriotti dans les commentaires, l'original de la réponse à cette question (créé pour v1.0) ne fonctionne pas dans le Bootstrap 2.0. Pour cette raison, j'ai mis à jour la réponse à l'appui de Bootstrap 2.0

Pour s'assurer que le contenu principal remplit au moins 100% de la hauteur de l'écran, nous avons besoin de définir la hauteur de l' html et body à 100% et de créer une nouvelle classe css appelés .fill qui a un minimum à hauteur de 100%:

html, body {
    height: 100%;
}

.fill { 
    min-height: 100%;
}

Nous pouvons ensuite ajouter l' .fill classe de tout élément que nous devons prendre jusqu'à 100% de la sceen hauteur. Dans ce cas, nous l'ajoutons à la première div:

<div class="container-fluid fill">
    ...
</div>

Pour s'assurer que la barre latérale et le Contenu des colonnes de même hauteur est très difficile et inutile. Au lieu de cela, nous pouvons utiliser l' ::after pseudo sélecteur pour ajouter un filler élément qui donnera l'illusion que les deux colonnes de même hauteur:

.filler::after {
    background-color: inherit;
    bottom: 0;
    content: "";
    right: 0;
    position: absolute;
    top: 0;
    width: inherit;
    z-index: -1;  
}

Assurez-vous que l' .filler élément est positionné relativement à l' .fill élément, nous devons ajouter position: relative de .fill:

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

Et enfin, ajoutez l' .filler style pour le HTML:

HTML

<div class="container-fluid fill">
    <div class="row-fluid">
        <div class="span3">
            ...
        </div>
        <div class="span9 hero-unit filler">
            ...
        </div>
    </div>
</div>

Notes

• Si vous avez besoin de l'élément sur la gauche de la page pour être l'apport alors vous avez besoin de changer de right: 0 de left: 0.

Answer 2

L'on a accepté la réponse semble être liquide-liquide. Voici une réponse qui est réellement fixe-liquide:

http://stackoverflow.com/a/9739345/237091