Colonne de largeur fixe avec un récipient-fluide dans bootstrap

Je suis en train d'essayer de trouver une solution pour avoir un côté de la colonne sur la gauche avec une largeur fixe, puis, sur la droite, une normale bootstrap container-fluid.

Même si la barre latérale n'est pas à l'intérieur de l'amorçage de la structure, il est ok. Je veux dire qu'il n'a pas à être avec col-xx-xx classe.

Quoi que je fasse le principal problème est que je n'arrive pas à faire le récipient de liquide reste à côté de la barre latérale.

Le point est que si je l'affichage à néant la barre latérale, le récipient de liquide doit utiliser toute la largeur de la page.

source d'informationauteur somtam

  1. 17

    Un fixe fluide mise en page est possible dans le Bootstrap 3mais maintenant que Bootstrap 4 est flexbox cette forme est beaucoup plus facile. Vous avez juste besoin d'activer flexbox, et de faire quelques ajustements simples à régler la largeur de votre côté fixe de la colonne flex: 0 0 300px;puis flex: 1; sur votre colonne principale à remplir largeur restante...

    Bootstrap 4 Alpha 2
    http://codeply.com/go/eAYKvDkiGw

    Ici est une simple mise à jour pour la dernière Bootstrap 4 qui est flexbox par défaut:

    Bootstrap 4 Alpha 6 ou Bêta
    http://codeply.com/go/V9UQrvLWwz

     @media (min-width: 576px) {
     .sidebar {
          max-width: 280px;
     }
 }

<div class="container-fluid">
    <div class="row flex-nowrap">
        <div class="col-md-4 col-12 sidebar">

        </div>
        <div class="col-md col-12 main">
            <h2>Main (fluid width...)</h2>
        </div>
    </div>
</div>

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

    Mise à jour 2018
    Bootstrap 4.0.0 exemple

  2. 0

    Essayer y compris votre container-fluid dans un div avec margin-left: 200px (où 200px est de la barre latérale, largeur).

    Alors la position de la barre latérale avec position: absolute par exemple