web-dev-qa-db-fra.com

Bootstrap 3 et 4 .container-fluid avec grille ajoutant un remplissage indésirable

J'aimerais que mon contenu soit fluide, mais lorsque j'utilise .container-fluid avec la grille de Bootstrap, je vois encore du bourrage. Comment puis-je me débarrasser du rembourrage?

Je vois que je ne reçois pas le remplissage avec .row, mais je veux ajouter des colonnes, et dès que je le reçois, 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

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

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

à

padding-right: 0px;
padding-left: 0px;
twitter-bootstraptwitter-bootstrap-3bootstrap-4
82
Tim

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

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

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

118
PArt

S'il vous plaît 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 classe .container-fluid, un remplissage horizontal de 15 pixels est ajouté. Cette opération est supprimée lorsque vous ajoutez une classe .row en tant qu'élément enfant à l'aide de la marge négative définie sur la ligne.

28
Kishore Kumar

Je pense que j'avais les mêmes exigences que Tim, mais aucune des réponses ne propose une "fenêtre de visualisation bord à bord avec une solution de gouttières internes normales". Ou une autre façon de le dire: comment puis-je obtenir que mes première et dernière colonnes fassent une percée dans le remplissage du conteneur et se dirigent vers le bord de la fenêtre d'affichage, tout en maintenant des gouttières normales entre les colonnes.

full width rows

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 le moment (Bootstrap 3.3.5 & 4.0-alpha).

http://www.bootply.com/ioWBaljBAd

Exemple 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 une div entre 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 (en blanc) dans de petites fenêtres. L'ajout de overflow-x: hidden au .row est requis pour le supprimer.

Ceci fonctionne de la même manière pour .container-fluid comme .container.

14
Lucas Nelson

5 ans ont passé, et il est assez étrange qu'il y ait tellement de réponses que ne suivent pas (ou sont contre) bootstrap règles ou ne répondent pas réellement à la question ...

Réponse courte
Utilisez simplement la classe no-gutters de 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. C'est également corrigé dans le code ci-dessus)

Réponse longue
Les bourrages que vous obtenez sont en réalité documentés dans Bootstrap's documentation :

Les lignes sont des wrappers pour les colonnes. Chaque colonne est dotée d'un remplissage horizontal (appelé gouttière) permettant de contrôler l'espace entre elles. Ce remplissage est ensuite neutralisé sur les lignes avec des marges négatives . De cette manière, tout le contenu de vos colonnes est aligné visuellement 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; toutefois, vous pouvez supprimer la marge des lignes et le remplissage des colonnes avec . No-gutters .rangée.

Bonus: À propos des erreurs trouvées dans les autres réponses

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

Dans une présentation 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 aurait déjà tout gâché et que vous deviez régler rapidement votre problème), envisagez d'utiliser px-0 de Bootstrap pour supprimer les paddings horizontaux à la place de pl-0 pr-0 ou réinventer vos styles.
8
Just Shadow

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

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

encore mieux? pas de rembourrage du tout au niveau du conteneur (nettoyant)

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

5
iCrus

Donc, voici le bref résumé pour 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.

4
Dm Mh

Vous avez seulement besoin de ces propriétés CSS dans la classe .container de Bootstrap et vous pouvez y insérer le système de grille normal sans que le contenu du conteneur ne soit en dehors 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;
}
3
Aaron Nuñez

Dans les nouvelles versions alpha, ils ont introduit classes d'espacement utilitaire . La structure peut alors être modifiée si vous les utilisez intelligemment.

Classes utilitaires d'espacement 

<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-0 et pr-0 suppriment 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, ils étaient séparés par 2 tirets, par ex. => p-x-0 et p-l-0 et ainsi de suite ...

Pour rester sur le sujet de la version 3: C’est ce que j’utilise sur les projets Bootstrap 3 et inclut la configuration du compas, pour cet utilitaire d’espacement particulier, dans bootstrap-sass (version 3) ou bootstrap (version 4.0.0-alpha.3) avec double tiret ou bootstrap (version 4.0.0-alpha.4 et ultérieure) avec simple tiret.

De plus, la dernière version augmente jusqu'à 5 fois le ratio (ex: pt-5 padding-top 5) au lieu de 3.

Compass 

$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; }
3
Tim Vermaelen

Je pense que personne n'a donné la bonne réponse à la question. Ma solution de travail est la suivante: 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, faites ceci:
.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.

2
Sahil Kumar Singh

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

1
Dave

Si vous travaillez avec le configurateur, vous pouvez régler le @grid-Gutter-width de 30px à 0

1
Stefan

J'ai moi-même eu du mal avec cela et je crois enfin l'avoir compris. C'est incroyable combien de réponses ont échoué sur cette question

Tout ce que vous avez à faire est de supprimer le rembourrage de tous vos éléments .col et de retirer également le rembourrage 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 ici pour prendre en compte toutes les différentes tailles de col que j'utilise. Je suis convaincu qu'il existe un moyen plus propre d'écrire le fichier css, mais cela illustre le résultat final.

0
Max Flanagan