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

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;

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/

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.

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.

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.

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.

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.

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">

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;
}

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; }

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>

2. 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.

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

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

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.

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.