web-dev-qa-db-fra.com

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

Est-il possible de créer une mise en page à 2 colonnes (Fixe - Fluide) ( 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?

csstwitter-bootstrapbootstrap-4fluid-layout
44
mbecker

- Une autre mise à jour -

Depuis Twitter Bootstrap version 2.0 - qui a entraîné la suppression de la classe .container-fluid - il n'a pas été possible d'implémenter une une mise en page à deux colonnes de type fluid-fluid utilisant seulement les classes bootstrap - cependant, j’ai mis à jour ma réponse pour y inclure quelques petites modifications CSS pouvant être apportées à votre propre code CSS, ce qui rendra cela possible

Il est possible d'implémenter une structure à fluide fixe en utilisant les CSS ci-dessous et légèrement code HTML modifié extrait de Twitter Bootstrap Échafaudage: agencements 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 la modification à l'appui de 2.0 en faisait une solution fluide-fluide - car elle explique les concepts sous-jacents à la création de la barre latérale et du contenu de la même hauteur (une partie importante de la question du demandeur telle qu'identifiée dans les commentaires)

Important

La réponse ci-dessous est fluid-fluid

Mise à jour  Comme l'a souligné @JasonCapriotti dans les commentaires, la réponse d'origine à cette question (créée pour la version 1.0) ne fonctionnait pas dans Bootstrap 2.0 Pour cette raison, j'ai mis à jour la réponse pour supporter Bootstrap 2.0

Pour vous assurer que le contenu principal remplit au moins 100% de la hauteur de l'écran, nous devons définir la hauteur de html et body à 100% et créer une nouvelle classe CSS appelée .fill Qui a une hauteur minimale de 100%:

html, body {
    height: 100%;
}

.fill { 
    min-height: 100%;
}

Nous pouvons ensuite ajouter la classe .fill À tout élément dont nous avons besoin pour occuper 100% de la hauteur de l'écran. Dans ce cas, nous l'ajoutons à la première div:

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

Il est très difficile et inutile de s’assurer que les colonnes Sidebar et Content ont la même hauteur. Au lieu de cela, nous pouvons utiliser le pseudo sélecteur ::after Pour ajouter un élément filler qui donnera l'illusion que les deux colonnes ont la même hauteur:

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

Pour vous assurer que l'élément .filler Est positionné par rapport à l'élément .fill, Nous devons ajouter position: relative À .fill:

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

Et enfin, ajoutez le style .filler Au code HTML:

HTML

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

Remarques

  • Si vous souhaitez que l'élément situé à gauche de la page soit l'élément de remplissage, vous devez remplacer right: 0 Par left: 0.
63
My Head Hurts

Mise à jour 2018

Bootstrap 4

Maintenant que BS4 est flexbox, le fixed-fluid est simple. Il suffit de définir la largeur de la colonne fixe et d'utiliser le .col classe sur la colonne de fluide.

.sidebar {
    width: 180px;
    min-height: 100vh;
}

<div class="row">
    <div class="sidebar p-2">Fixed width</div>
    <div class="col bg-dark text-white pt-2">
        Content
    </div>
</div>

http://www.codeply.com/go/7LzXiPxo6a

Bootstrap 3 ..

Une approche d'une présentation fixed-fluid consiste à utiliser des requêtes de média alignées sur les points d'arrêt de Bootstrap, de sorte que vous n'utilisez que les colonnes à largeur fixe qui sont des écrans plus grands. la pile de mise en page réagit sur des écrans plus petits ...

@media (min-width:768px) {
  #sidebar {
      min-width: 300px;
      max-width: 300px;
  }
  #main {
      width:calc(100% - 300px);
  }
}

Working Bootstrap 3 Fixed-Fluid Demo

Questions/Réponses connexes:
Colonne de largeur fixe avec un fluide de conteneur dans le bootstrap
Comment faire pour que la colonne de gauche soit fixe et que l'on puisse la faire défiler à droite dans Bootstrap 4, responsive?

12
Zim