Comment faire une mise en page fluide avec bootstrap 3 sans barre de défilement horizontale

Question

voici un exemple de lien: http://bootply.com/76369

c'est le html que j'utilise.

<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>

bootstrap 3 n'a pas de conteneur de fluide et des lignes fluides.

je ne peut pas envelopper avec .classe de conteneur car il deviendra disposition fixe.

comment le rendre liquide (pleine largeur de la page) mise en page? (sans barre de défilement horizontale)

avec ces balises. lorsque vous afficher dans les résultats, le x-faites défiler la barre est visible de sorte que vous pouvez faire défiler à gauche et à droite qu'il ne devrait pas.

Answer 1

Je l'ai aussi et en attendant qu'ils résolvent le problème, j'ai ajouté cette honte css:

body { overflow-x: hidden;}

c'est une alternative horrible, mais ça marche. Je serai heureux de le supprimer quand ils auront résolu le problème.

Une autre alternative, comme le souligne le numéro , consiste à remplacer .row :

 .row {
  margin-left: 0px;
  margin-right: 0px;
}
 

Answer 2

Cela a été introduit dans v3.1.0: http://getbootstrap.com/css/#grid-example-fluid

L' engagement n ° 62736046 a ajouté "une variation de conteneur à fluide pour les conteneurs pleine largeur et les dispositions".

Answer 3

Ce problème est connu dans BS 3 - https://github.com/twbs/bootstrap/issues/9862?source=cc.

J'ai testé sur Bootply en utilisant la dernière version, continuez donc à regarder GitHub pour connaître les dernières mises à jour / corrections.

Answer 4

Si je vous ai bien compris, l’ajout de cette option après toute requête sur le support annule les restrictions de largeur des grilles par défaut. Fonctionne pour moi sur bootstrap 3 où j'avais besoin d'une mise en page 100% largeur

 .container {
   max-width: 100%;
   /* This will remove the outer padding, and push content edge to edge */
   padding-right: 0;
   padding-left: 0;
 }
 

Ensuite, vous pouvez placer vos éléments de ligne et de grille dans le conteneur.

Answer 5

Mise à jour à partir de 2014, à partir de la documentation Bootstrap:

Grilles et mises en page pleine largeur Les personnes cherchant à créer des mises en page entièrement fluides (ce qui signifie que votre site s'étend sur toute la largeur de la fenêtre d'affichage) doivent envelopper le contenu de leur grille dans un élément conteneur avec un remplissage: 0 15px; pour compenser la marge: 0 -15px; utilisé sur .rows.