Comment faire bootstrap 3 mise en page fluide sans barre de défilement horizontale
voici un exemple de lien: http://bootply.com/76369
c'est 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 ni fluide de conteneur ni fluide de rangée.
je ne peux pas l'envelopper avec la classe .container car il deviendra une mise en page fixe.
comment le rendre fluide (largeur de la page entière) ? ( sans barre de défilement horizontale )
avec ces balises. lorsque vous affichez dans le résultat, la barre x-scroll est visible afin que vous puissiez faire défiler les éléments à gauche et à droite.
édité le: 2015-12-09
Déjà la réponse et Bootstrap déjà publié le correctif depuis la version 3.1.0
Cela a été introduit dans v3.1.0: http://getbootstrap.com/css/#grid-example-fluid
Commit # 62736046 ajouté "la variation du conteneur pour les conteneurs pleine largeur et les dispositions".
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 indiqué dans le numéro , consiste à remplacer .row:
.row {
margin-left: 0px;
margin-right: 0px;
}
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.
Dans Bootstrap 3, .row est à utiliser dans un .container ou .container-fluid pour contrecarrer les marges négatives de la ligne. Ceci éliminera la barre de défilement horizontale.
De la docs ...
"Les rangées doivent être placées dans un conteneur. (Largeur fixe) ou .container-fluid (pleine largeur) pour un alignement et un remplissage corrects."
Bootstrap 4
La relation container> row> col fonctionne de la même manière que 3.x ...
"Les conteneurs sont l’élément de mise en page le plus élémentaire de Bootstrap et sont obligatoires pour l’utilisation de notre système de grille par défaut"
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.
Mise à jour à partir de 2014, à partir de Bootstrap docs:
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 padding: 0 15px; pour décaler la margin: 0 -15px; utilisé sur .rows.
Juste mes 2 cents ici. Cela fonctionnera principalement pour vous, comme cela a été le cas pour moi.
body > .row {
margin-left: 0px;
margin-right: 0px;
}
J'ai rencontré le même problème (vouloir une mise en page fluide) mais je voulais conserver les options réactives avec le réarrangement des colonnes, etc. pour les écrans plus petits.
// Large screen / wide desktop (last row of file)
@container-lg-desktop: 100%; //((1140px + @grid-Gutter-width));
Cette valeur est utilisée une fois dans grid.less et définit
@media (min-width: @screen-lg-desktop) {
.container {
max-width: @container-lg-desktop;
}
....
}
Résultat: plus de 1200 pixels de la grille est fluide (sans barres de défilement horizontales). En-dessous, les règles normales de réponse s’appliquent. Vous pouvez bien sûr définir cela aussi facilement avec d’autres requêtes multimédia.
Si vous ne souhaitez pas éditer ni compiler vous-même, vous pouvez remplacer la maxwidth dans votre propre feuille de style, comme ci-dessous:
@media (min-width: 1200px) { /* or min-width: wherever-you-want-your-fluid-breakpoint */
body .container {
max-width: 100%;
}
}
Tout cela suppose que vous utilisiez la syntaxe de grille normale Bootstrap, incluant le conteneur, comme ci-dessous:
<div class="container">
<div class="row" >
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</div>
J'espère que cela t'aides!
Dans la dernière version de Twitter Bootstrap, la mise en page est fluide par défaut. Vous n'avez donc pas besoin de classes supplémentaires pour déclarer votre mise en page comme étant fluide.
Vous pouvez en outre vous référer à -
http://bassjobsen.weblogs.fm/migrate-your-templates-from-Twitter-bootstrap-2-x-to-Twitter-bootstrap-3/http: // blog .getbootstrap.com /
Cela a fonctionné pour moi. Testé en FF, Chrome, IE11, IE10
.row {
width:99.99%;
}
La barre de défilement horizontale peut apparaître si le container-fluid div est placé directement dans le body.
La manière correcte d'utiliser une structure container-fluid est la suivante:
<body>
<section>
<div class="container-fluid">
<div class="row">
<!-- content goes here -->
</div>
</div>
</section>
</body>
Essayez donc d’emballer vos DIVs container-fluid dans une div externe, comme un <div id="wrap"> ou un <section> ou <article> ou <aside> ou un autre <div> spécialisé, et presto! pas de barre de défilement horizontale.
Appliquer sur le corps semble se débarrasser de la barre de défilement horizontale
overflow-x: hidden;
Si cela reste d'actualité pour quelqu'un, ma solution était la suivante:
.container{
overflow: hidden;
overflow-y: auto;
}
Dans Bootstrap 3, placer les colonnes immédiatement sous le corps devrait vous donner une présentation fluide sans barre de défilement horizontale.
<body>
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</body>
La version Bootstrap 3.0 est délicate, ils ajouteront un correctif pour ce problème et renverront probablement le contenu du conteneur dans Bootstrap 3.1. Mais jusque-là, voici un correctif que j'utilise:
Tout d'abord, vous avez besoin d'un conteneur personnalisé et définissez-le sur une largeur de 100%. Vous devrez ensuite corriger la disposition des marges des lignes, ainsi que la barre de navigation si vous l'avez:
/* Custom container */
.container-full {
margin: 0 auto;
width: 100%;
}
/*fix row -15px margin*/
.container-fluid {
padding: 0 15px;
}
/*fix navbar margin*/
.navbar{
margin: 0 -15px;
}
/*fix navbar-right margin*/
.navbar-nav.navbar-right:last-child {
margin-right: 0px;
}
Vous pouvez empiler les classes conteneur complet et conteneur fluide sur le div racine, et vous pouvez utiliser conteneur-fluid ultérieurement.
J'espère que ça aide, si vous avez besoin de plus d'informations, faites le moi savoir.
Trouvé cette solution de contournement
.row {
margin-left: 0;
margin-right: 0;
}
[class^="col-"] > [class^="col-"]:first-child,
[class^="col-"] > [class*=" col-"]:first-child
[class*=" col-"] > [class^="col-"]:first-child,
[class*=" col-"]> [class*=" col-"]:first-child,
.row > [class^="col-"]:first-child,
.row > [class*=" col-"]:first-child{
padding-left: 0px;
}
[class^="col-"] > [class^="col-"]:last-child,
[class^="col-"] > [class*=" col-"]:last-child
[class*=" col-"] > [class^="col-"]:last-child,
[class*=" col-"]> [class*=" col-"]:last-child,
.row > [class^="col-"]:last-child,
.row > [class*=" col-"]:last-child{
padding-right: 0px;
}
C'est ce qui a fonctionné pour moi. J'ai ajouté un style en ligne pour supprimer la petite marge à droite. Je n'aime pas beaucoup les styles en ligne, mais cet attribut de style isolé dans mon code html me permet de me souvenir facilement du piratage épinglé dans mon code par ailleurs bien séparé. Cela élimine également le problème du chargement de mes styles externes avant ou après la feuille de style par défaut bootstrap.
<div class="row" style="margin-right:0px;">
<div class="col-md-6">
<div class="col-md-6">
</div>
C'est déjà fluide par défaut. Si vous voulez être fluide pour moins de largeur au lieu de col-md-6, utilisez col-sm-6 ou col-xs-6.
Vous pouvez résoudre ce problème sans perturber le css bootstrap et attendre une correction dans la version suivante. Vous pouvez donc simplement enrouler votre ligne en définissant votre propre classe .container-fluid avec un remplissage.
//Add this class to your global css file
<style>
.container-fluid {
padding: 0 15px;
}
</style>
//Wrap your rows in within this .container-fluid
<div class="container-fluid">
<div class="row">
<div class="col-md-3">content</div>
<div class="col-md-9">content</div>
<div class="col-md-3">content</div>
</div>
</div>
Résumant les commentaires les plus pertinents en une réponse:
- c'est un bug connu
- il existe des solutions de contournement mais vous n'en avez peut-être pas besoin (lisez la suite)
- cela se produit lorsque des éléments sont placés directement dans le corps plutôt que dans un conteneur ou un autre div contenant. Les placer directement dans le corps est exactement ce que la plupart des gens font en testant des choses localement. Une fois que vous placez votre code dans la page complète (donc dans un conteneur-fluid ou un autre conteneur), vous ne rencontrerez plus ce problème (inutile de changer quoi que ce soit). =
La seule chose qui m'a aidé était de placer margin:0px sur le plus haut <div class="row"> dans mon DOM html.
Encore une fois, ce n’était pas la façon la plus attrayante de résoudre le problème, mais comme ce n’est qu’à un endroit, je mets cela en ligne.
En tant que fyi, les correctifs bootstrap apparents, fluides et apparents, introduisaient uniquement un espace plus grand de part et d'autre de la page visible ... :( Bien que je sois tombé sur ma solution en lisant le va-et-vient sur le github problème - si intéressant à lire.
Vous pouvez ajouter un rembourrage de 10 pixels sur les côtés de votre élément body si tous ses enfants sont des lignes.
body {
padding: 0 10px;
}
si votre balisage HTML ressemble à quelque chose comme ceci:
<body>
<div class="row"></div>
<div class="row"></div>
<div class="row"></div>
</body>
Les lignes ont une marge négative de 10 px. C'est ce qui cause le débordement. Si vous ajoutez un rembourrage de 10 px au corps, ils s’annuleront.