Bootstrap 3 et 4 .conteneur-fluide avec grille ajoutant un rembourrage indésirable

97

J'aimerais que mon contenu soit fluide, mais lors de l'utilisation .container-fluidavec la grille de Bootstrap, je vois toujours un remplissage. Comment puis-je me débarrasser du rembourrage?

Je vois que je n'obtiens pas le remplissage avec .row, mais je veux ajouter des colonnes, et dès que je le fais, le remplissage est de retour: O.

Je veux pouvoir utiliser les colonnes en pleine largeur.

Un exemple:

<div class="container-fluid">
    <div class="row">
      <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div> 
  <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly barebones HTML document.</p>
  </div> 
</div>

Solution que j'ai:

Remplacer bootstrap.css, linke 1427 et 1428 (v3.2.0)

padding-right: 15px;
padding-left: 15px;

à

padding-right: 0px;
padding-left: 0px;
Tim
la source
1
peut être utile leejacksondev.com
Brian Dillingham
1
Pouvez-vous publier votre code pertinent afin que nous puissions adapter nos réponses à votre code?
Simple Sandman
1
Mis à jour avec le code! Je souhaite supprimer le remplissage lorsque j'ai une colonne, pas seulement lorsque j'utilise une ligne.
Tim
1
ce n'est pas la bonne solution! J'ai suggéré d'aller à @part answer
Pooja Roy

Réponses:

126

Vous devez également ajouter une "ligne" à chaque conteneur qui "corrigera" ce problème!

<div class="container-fluid">
   <div class="row">
        Some text
   </div>
</div>

Voir http://jsfiddle.net/3px20h6t/

Partie
la source
3
Je vous remercie. Ce que j'essaie de faire, c'est de supprimer le rembourrage lorsque j'utilise des colonnes. Une idée sur la façon dont je peux faire cela?
Tim
1
Ce n'est possible que via une classe supplémentaire ... J'ai défini une classe nommée remove-padding qui a juste un .remove-padding {padding-left: 0; padding-right: 0; marge gauche: 0; margin-right: 0} Autant que je sache, il n'y a pas de classe prédéfinie pour supprimer le remplissage par défaut de 15px
PArt
27
Je ne peux pas réaliser à quel point cette réponse a autant de votes positifs, alors qu'elle ne suit pas les directives du système Bootstrap Grid. La troisième règle de la section Introduction stipule que «le contenu doit être placé dans des colonnes et seules les colonnes peuvent être des enfants immédiats de lignes». La réponse de Lucas Nelson propose une approche équitable pour obtenir l'effet souhaité sans enfreindre la règle de syntaxe.
Siavas
Vous pouvez également utiliser la rowclasse directement avec les col-**-*classes si votre disposition vous convient.
Anwar
2
Comment cela peut-il être voté 87 fois (et compté) alors qu'il ne répond pas à la question? La question indique que cela fonctionne quand juste a rowest utilisé ... mais pas quand des colonnes sont utilisées (pour lesquelles ce fait est ignoré dans cette réponse)? Quoi qu'il en soit, j'obtiens exactement le même remplissage erroné de 15px que celui décrit dans la question et c'est très frustrant.
Jeach
32

Veuillez trouver le CSS réel de Bootstrap

.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.row {
  margin-right: -15px;
  margin-left: -15px;
}

Lorsque vous ajoutez une .container-fluidclasse, elle ajoute un remplissage horizontal de 15 px, et la même chose sera supprimée lorsque vous ajoutez une .rowclasse en tant qu'élément enfant par la marge négative définie sur la ligne.

Kishore Kumar
la source
3
Merci beaucoup. Cependant, j'aimerais le supprimer lorsque j'utilise une colonne. Je ne veux vraiment pas jouer avec le css de bootstrap de base. Je soupçonne qu'il doit y avoir une manière sanctionnée de le faire. Des pensées?
Tim
1
Si vous souhaitez utiliser la colonne en pleine largeur, vous pouvez appliquer col-md-12 col-sm-12 css dans la ligne
Kishore Kumar
2
Merci. J'ai essayé ça, mais j'ai toujours du rembourrage. De plus, j'ai besoin de deux colonnes. Est-ce que je manque quelque chose?
Tim
1
Le remplissage que vous voyez est par défaut de Bootstrap, si vous voulez vous en débarrasser, comment ajouter votre propre classe.Lorsque vous ajoutez une nouvelle classe et que vous voulez remplacer bootstrap, vous pouvez ajouter! Important après le style.
Kishore Kumar
1
Si deux colonnes, vous pouvez ajouter cette classe à votre colonne col-md-6
Kishore Kumar
26

5 ans se sont écoulés, et c'est assez étrange qu'il y ait autant de réponses qui ne suivent pas (ou sont contre) les règles du bootstrap ou qui ne répondent pas réellement à la question ...

Réponse courte:
utilisez simplement la no-guttersclasse Bootstrap dans votre ligne pour supprimer le remplissage:

  <div class="container-fluid">
    <div class="row no-gutters">
      <div class="col-sm-6">
        <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
          barebones HTML document.</p>
      </div>
      <div class="col-sm-6">
        <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
          barebones HTML document.</p>
      </div>
    </div>
  </div>

(Vous avez également oublié d'ajouter </div>à la fin de votre fichier. Cela a également été corrigé dans le code ci-dessus)

Remarque:

Dans certains cas, vous souhaitez également supprimer le rembourrage du conteneur lui-même. Dans ce cas, envisagez de supprimer .containerou de .container-fluidclasser comme recommandé par la documentation .

<!--<div class="container-fluid">-->
<div class="row no-gutters">
  <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
      barebones HTML document.</p>
  </div>
  <div class="col-sm-6">
    <p>Use this document as a way to quickly start any new project.<br> All you get is this text and a mostly
      barebones HTML document.</p>
  </div>
</div>
<!--</div>-->

Longue réponse:

Les rembourrages que vous obtenez sont réellement documentés dans de Bootstrap documentation :

Les lignes sont des wrappers pour les colonnes. Chaque colonne a un rembourrage horizontal (appelé gouttière) pour contrôler l'espace entre eux. Ce remplissage est alors contrecarré sur les lignes à marges négatives . De cette façon, tout le contenu de vos colonnes est visuellement aligné sur le côté gauche.

Et à propos de la solution, qui a également été documentée:

Les colonnes ont un remplissage horizontal pour créer les gouttières entre les colonnes individuelles, cependant, vous pouvez supprimer la marge des lignes et le remplissage des colonnes avec .no- gutters sur le .row.

Concernant la chute du conteneur:

Besoin d'un design bord à bord? Déposez le .container ou .container-fluid parent.

Bonus: à propos des erreurs trouvées sur les autres réponses

  • Évitez de pirater les classes de conteneurs de bootstrap au lieu de vous assurer que vous avez mis tout le contenu dans col-s et les avez enveloppés avec row-s comme le dit la documentation :

Dans une disposition en grille, le contenu doit être placé dans des colonnes et seules les colonnes peuvent être des enfants immédiats de lignes.

  • Si vous devez encore faire du piratage (juste au cas où quelqu'un a déjà gâché les choses et que vous devez résoudre rapidement votre problème), envisagez d'utiliser Bootstrap px-0pour supprimer les rembourrages horizontaux à la place pl-0 pr-0ou réinventer vos styles.
Juste l'ombre
la source
3
.container-fluidcontient toujours padding-right: 15pxet padding-left: 15px, ce qui signifie que vous ne pourrez toujours pas affleurer la fenêtre en utilisant votre méthode. Vous auriez encore besoin de faire quelque chose comme container-fluid px-0.
lightyrs
2
Dans ce cas, la documentation recommande de simplement «supprimer le .container ou le .container-fluid parent». . J'ai également inclus cela dans la réponse.
Just Shadow
14

Je pense que j'avais la même exigence que Tim, mais aucune des réponses ne prévoit une `` colonne de bord à bord de fenêtre avec une solution de gouttières internes normales ''. Ou une autre façon de le dire: comment puis-je faire en sorte que mes première et dernière colonnes se fassent dans le rembourrage du conteneur et s'écoulent vers le bord de la fenêtre, tout en conservant des gouttières normales entre les colonnes.

rangées pleine largeur

D'après ce que je peux dire, il n'y a pas de solution nette et propre. C'est ce qui fonctionne pour moi, mais c'est bien en dehors de tout ce qui serait supporté par Bootstrap. Mais cela fonctionne pour l'instant (Bootstrap 3.3.5 et 4.0-alpha).

http://www.bootply.com/ioWBaljBAd

Exemple de HTML:

<div class="container">
  <div class="row full-width-row">
    <div>
      <div class="col-sm-4 col-md-3"></div>
      <div class="col-sm-4 col-md-3"></div>
      <div class="col-sm-4 col-md-3"></div>
      <div class="col-sm-4 col-md-3"></div>
    </div>
  </div>
</div>

CSS:

.full-width-row {
  overflow-x: hidden;
}

.full-width-row > div {
  margin-left: -15px;
  margin-right: -15px;
}

L'astuce consiste à imbriquer un diventre la ligne et les colonnes pour générer la marge supplémentaire de -15px à insérer dans le remplissage du conteneur. La marge négative supplémentaire crée un défilement horizontal (dans les espaces) sur les petites fenêtres. L'ajout overflow-x: hiddenà .rowest requis pour le supprimer.

Cela fonctionne de la même manière pour .container-fluidque .container.

Lucas Nelson
la source
pourquoi pas juste.full-width-row > div { padding: 0; }
Bamieh
Cela ne fonctionne pas, vous obtenez toujours une gouttière au début et à la fin de la rangée: bootply.com/eM8y3kkfbi
Lucas Nelson
13

Voici donc le bref résumé de Bootstrap 4:

<div class="container-fluid px-0">
  <div class="row no-gutters">
    <div class="col-12">          //any cols you need
        ...
    </div>
  </div>
</div>

Ça marche pour moi.

Dm Mh
la source
Pour Bootstrap 4, c'est la bonne réponse et la meilleure pratique.
Syafiq Freman le
2
@SyafiqZainal, et c'est aussi un duplicata de ma réponse originale ci-dessous (postée beaucoup plus tôt): D Alors, maintenant je me demande s'il est correct de publier la même réponse dans StackOverflow.
Just Shadow
6

Pourquoi ne pas annuler le remplissage ajouté par container-fluid en marquant le remplissage gauche et droit comme 0?

<div class="container-fluid pl-0 pr-0">

mieux encore? aucun rembourrage au niveau du conteneur (nettoyant)

<div class="container-fluid pl-0 pr-0">

iCrus
la source
4
pl-0 pr-0peut être changé enpx-0
Patrick McDonald
3

Vous n'avez besoin que de ces propriétés CSS dans la classe .container de Bootstrap et vous pouvez mettre en lui le système de grille normal sans que quelqu'un le contenu du conteneur soit hors de lui (sans scroll-x dans la fenêtre).

HTML:

<div class="container">
    <div class="row">
        <div class="col-xs-12">
            Your content here!
            ...    
        </div>
    </div>
    ... more rows
</div>

CSS:

/* Bootstrap custom */
.container{
    padding-left: 0rem;
    padding-right: 0rem;
    overflow: hidden;
}
Aaron Nuñez
la source
3

Dans les nouvelles versions alpha, ils ont introduit des classes d'espacement utilitaires . La structure peut ensuite être modifiée si vous les utilisez de manière intelligente.

Espacement des classes d'utilité

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-4 col-md-3 pl-0"></div>
        <div class="col-sm-4 col-md-3"></div>
        <div class="col-sm-4 col-md-3"></div>
        <div class="col-sm-4 col-md-3 pr-0"></div>
    </div>
</div>

pl-0et pr-0supprimera le remplissage de début et de fin des colonnes. Un problème qui reste concerne les lignes incorporées d'une colonne, car elles ont toujours une marge négative. Dans ce cas:

<div class="col-sm-12 col-md-6 pl-0">
    <div class="row ml-0">
</div>

Différences de version

Notez également que les classes d'espacement des utilitaires ont été modifiées depuis la version 4.0.0-alpha.4. Avant qu'ils ne soient séparés par des tirets 2 , par exemple => p-x-0et p-l-0et ainsi de suite ...

Pour rester sur le sujet de la version 3: C'est ce que j'utilise sur les projets Bootstrap 3 et inclure la configuration de la boussole, pour cet utilitaire d'espacement particulier, dans bootstrap-sass(version 3) ou bootstrap(version 4.0.0-alpha.3) avec des doubles tirets ou bootstrap(version 4.0.0-alpha.4 et plus) avec des tirets simples.

De plus, les dernières versions augmentent jusqu'à 5 fois un ratio (ex: pt-5padding-top 5) au lieu de seulement 3.


Boussole

$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px) !default;

@import "../scss/mixins/breakpoints"; // media-breakpoint-up, breakpoint-infix
@import "../scss/utilities/_spacing.scss";

Sortie CSS

Vous pouvez bien sûr toujours copier / coller les classes d'espacement de remplissage uniquement à partir d'un fichier css généré.

.p-0 { padding: 0 !important; }
.pt-0 { padding-top: 0 !important; }
.pr-0 { padding-right: 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left: 0 !important; }
.px-0 { padding-right: 0 !important; padding-left: 0 !important; }
.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.p-1 { padding: 0.25rem !important; }
.pt-1 { padding-top: 0.25rem !important; }
.pr-1 { padding-right: 0.25rem !important; }
.pb-1 { padding-bottom: 0.25rem !important; }
.pl-1 { padding-left: 0.25rem !important; }
.px-1 { padding-right: 0.25rem !important; padding-left: 0.25rem !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.p-2 { padding: 0.5rem !important; }
.pt-2 { padding-top: 0.5rem !important; }
.pr-2 { padding-right: 0.5rem !important; }
.pb-2 { padding-bottom: 0.5rem !important; }
.pl-2 { padding-left: 0.5rem !important; }
.px-2 { padding-right: 0.5rem !important; padding-left: 0.5rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.p-3 { padding: 1rem !important; }
.pt-3 { padding-top: 1rem !important; }
.pr-3 { padding-right: 1rem !important; }
.pb-3 { padding-bottom: 1rem !important; }
.pl-3 { padding-left: 1rem !important; }
.px-3 { padding-right: 1rem !important; padding-left: 1rem !important; }
.py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.p-4 { padding: 1.5rem !important; }
.pt-4 { padding-top: 1.5rem !important; }
.pr-4 { padding-right: 1.5rem !important; }
.pb-4 { padding-bottom: 1.5rem !important; }
.pl-4 { padding-left: 1.5rem !important; }
.px-4 { padding-right: 1.5rem !important; padding-left: 1.5rem !important; }
.py-4 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.p-5 { padding: 3rem !important; }
.pt-5 { padding-top: 3rem !important; }
.pr-5 { padding-right: 3rem !important; }
.pb-5 { padding-bottom: 3rem !important; }
.pl-5 { padding-left: 3rem !important; }
.px-5 { padding-right: 3rem !important; padding-left: 3rem !important; }
.py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
Tim Vermaelen
la source
2

Je pense que personne n'a donné la bonne réponse à la question. Ma solution de travail est: 1. Déclarez simplement une autre classe avec l'exemple de classe container-fluid (.maxx):

 <div class="container-fluid maxx">
   <div class="row">
     <div class="col-sm-12">
     <p>Hello</p>
     </div>
   </div>
  </div>

  1. Ensuite, en utilisant la spécificité dans la partie css, procédez comme suit:

.container-fluid.maxx {
  padding-left: 0px;
  padding-right: 0px; }

Cela fonctionnera à 100% et supprimera le rembourrage de gauche et de droite. J'espère que ça aide.

Sahil Kumar Singh
la source
2
Que diriez-vous px-0de régler les rembourrages gauche et droit pour Bootstrap 4
Vincent Liong
1

Si vous travaillez avec le configuratior vous pouvez régler le @grid-gutter-widthde 30pxla0

Stefan
la source
1

Je l'ai utilisé <div class="container-fluid" style="padding: 0px !important"> et cela semble fonctionner.

Dave
la source
2
pourrait éviter le style et ajouter à la place la classe utilitairep-0
iCrus
0

J'ai eu du mal avec cela moi-même et je crois enfin que je l'ai compris. C'est incroyable le nombre de réponses infructueuses à cette question

Tout ce que vous avez à faire est de supprimer le remplissage de tous vos éléments .col, et de supprimer également le remplissage du .container-fluid.

Je l'ai fait dans mon propre projet un peu négligemment en ajoutant ce qui suit à mon fichier css:

.col, col-10, col-12, col-2, col-6 {
    padding: 0!important;
}

.container-fluid {
    padding: 0!important;
}

J'ai juste les différentes tailles de col pour tenir compte de toutes les différentes tailles de col que j'utilise. Je suis convaincu qu'il existe une manière plus propre d'écrire le css, mais cela illustre le résultat final.

Max Flanagan
la source
0

Utiliser px-0sur containeret no-gutterssur le rowpour enlever les rembourrages.

Citations de Bootstrap 4 - Système de grille :

Les lignes sont des wrappers pour les colonnes. Chaque colonne a un rembourrage horizontal (appelé gouttière) pour contrôler l'espace entre eux. Ce remplissage est alors contrecarré sur les lignes à marges négatives. De cette façon, tout le contenu de vos colonnes est visuellement aligné sur le côté gauche.

Les colonnes ont un remplissage horizontal pour créer les gouttières entre les colonnes individuelles, cependant, vous pouvez supprimer la marge des lignes et le remplissage des colonnes avec .no-gutterssur le .row.

Voici une démo en direct:

h1 {
  background-color: tomato;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />

<div class="container-fluid" id="div1">
  <div class="row">
    <div class="col">
        <h1>With padding : (</h1>
    </div>
  </div>
</div>

<div class="container-fluid px-0" id="div1">
  <div class="row no-gutters">
    <div class="col">
        <h1>No padding : > </h1>
    </div>
  </div>
</div>

La raison pour laquelle cela fonctionne est que , container-fluidet les coldeux ont un rembourrage suivants:

padding-right: 15px;
padding-left: 15px;

px-0peut supprimer le rembourrage horizontal container-fluidet no-gutterspeut supprimer le rembourrage col.

Wenhe Qi
la source