web-dev-qa-db-fra.com

Colonne de largeur fixe avec un fluide de conteneur

J'essaie de trouver une solution pour avoir une colonne latérale à gauche de largeur fixe, puis à droite un Bootstrap container-fluid normal.

Même si la barre latérale ne se trouve pas dans la structure Bootstrap, ça va. Je veux dire que ça ne doit pas être avec la classe col-xx-xx.

Quoi que je fasse, le problème principal est que je ne parviens pas à faire en sorte que le réservoir de liquide reste à côté de la barre latérale.

Le fait est également que si je n’affiche pas la barre latérale, le conteneur de fluide doit utiliser toute la largeur de la page.

csstwitter-bootstrapcss3flexbox
17
somtam

Une disposition fixed-fluid est possible dans Bootstrap 3 , mais maintenant que Bootstrap 4 est une boîte souple, cette disposition est beaucoup plus simple. Vous devez juste activer flexbox et faire quelques ajustements simples pour définir la largeur de votre colonne à côté fixe flex: 0 0 300px;, puis flex: 1; sur votre colonne principale pour remplir la largeur restante ...

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

Voici une mise à jour plus simple pour le dernier Bootstrap 4 qui est flexbox par défaut:

Bootstrap 4 Alpha 6 ou Betahttp://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 une mise en page à 2 colonnes (fixe - fluide) avec Twitter Bootstrap?

Mise à jour 2018exemple de Bootstrap 4.0.0

20
Zim

Essayez d'inclure votre container-fluid dans une div avec margin-left: 200px (où 200px est la largeur de votre barre latérale).

Ensuite, placez votre barre latérale avec position: absolute par exemple

0
kartsims