web-dev-qa-db-fra.com

Comment créer une mise en page fluide à deux colonnes avec Twitter Bootstrap v3.0

Depuis que bootstrap a supprimé les classes * fluid css de la v3.0, je ne trouvais pas le moyen de créer une mise en page fluide à deux colonnes. Le but est d'obtenir une mise en page similaire à la mise en page Fluid exemple dans leur ancienne documentation: http://getbootstrap.com/2.3.2/scaffolding.html#layouts

css3twitter-bootstrapresponsive-designtwitter-bootstrap-3
38
RonyK

La grille dans Bootstrap 3 est maintenant fluide par défaut ( http://getbootstrap.com/getting-started/#migration-dropped ). Vous devez simplement utiliser .row et .container ..

<div class="container">
    <div class="row">
        <div class="col-md-2">
            Sidebar content
        </div>
        <div class="col-md-10">
            Body content
        </div>
    </div>
</div>

Ce ne sera cependant pas 100% largeur. Si vous voulez 100% largeur, vous pouvez faire quelque chose comme ça .. http://www.bootply.com/86324

UPDATE: 3.0.1 et versions ultérieures utilisent container-fluid pour toute la largeur.

75
Zim