Bootstrap 3 und 4 .container-Flüssigkeit mit Gitter, das unerwünschte Polsterung hinzufügt

97

Ich möchte, dass mein Inhalt flüssig ist, aber wenn ich ihn .container-fluidmit dem Bootstrap-Raster verwende, sehe ich immer noch Polsterung. Wie kann ich die Polsterung loswerden?

Ich sehe, dass ich das Auffüllen mit .row nicht bekomme, aber ich möchte Spalten hinzufügen, und sobald ich es tue, ist das Auffüllen wieder da: O.

Ich möchte die Spalten in voller Breite verwenden können.

Ein Beispiel:

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

Lösung, die ich habe:

Überschreiben Sie bootstrap.css, links 1427 & 1428 (v3.2.0)

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

zu

padding-right: 0px;
padding-left: 0px;
Tim
quelle
1
kann nützlich sein leejacksondev.com/…
Brian Dillingham
1
Können Sie Ihren relevanten Code veröffentlichen, damit wir unsere Antworten auf Ihren Code zuschneiden können?
Einfacher Sandmann
1
Mit Code aktualisiert! Ich möchte das Auffüllen entfernen, wenn ich eine Spalte habe, nicht nur, wenn ich eine Zeile verwende.
Tim
1
Es ist nicht die richtige Lösung! Ich schlug vor, mit @part Antwort zu gehen
Pooja Roy

Antworten:

126

Sie sollten auch jedem Container eine "Zeile" hinzufügen, die dieses Problem "behebt"!

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

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

Teil
quelle
3
Danke dir. Ich versuche, die Auffüllung zu entfernen, wenn ich Spalten verwende. Irgendeine Idee, wie ich das machen kann?
Tim
1
Das ist nur über eine zusätzliche Klasse möglich ... Ich habe eine Klasse namens remove-padding definiert, die nur eine .remove-padding {padding-left: 0; Polsterung rechts: 0; Rand links: 0; Rand-rechts: 0} Soweit ich weiß, gibt es keine vordefinierte Klasse, um die Standard-15px-Polsterung zu entfernen
PArt
27
Ich kann nicht erkennen, dass diese Antwort so viele positive Stimmen hat, obwohl sie nicht den Richtlinien des Bootstrap Grid-Systems entspricht. Die dritte Regel im Abschnitt Einführung lautet: "Inhalt sollte in Spalten platziert werden, und nur Spalten dürfen unmittelbare untergeordnete Elemente von Zeilen sein." Die Antwort von Lucas Nelson bietet einen fairen Ansatz, um den gewünschten Effekt zu erzielen, ohne die Syntaxregel zu verletzen.
Siavas
Sie können die rowKlasse auch direkt mit col-**-*Klassen verwenden, wenn Ihr Layout passt.
Anwar
2
Wie kann dies 87 Mal gewählt werden (und gezählt werden), wenn die Frage nicht beantwortet wird? Die Frage besagt, dass es funktioniert, wenn nur a rowverwendet wird ... aber nicht, wenn Spalten verwendet werden (für die diese Tatsache in dieser Antwort ignoriert wird)? Wie auch immer, ich bekomme genau die gleiche fehlerhafte 15px-Polsterung wie in der Frage beschrieben und es ist sehr frustrierend.
Jeach
32

Das aktuelle CSS finden Sie in Bootstrap

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

Wenn Sie eine .container-fluidKlasse hinzufügen, wird eine horizontale Auffüllung von 15 Pixel hinzugefügt. Diese wird entfernt, wenn Sie eine .rowKlasse als untergeordnetes Element am negativen Rand der Zeile hinzufügen .

Kishore Kumar
quelle
3
Vielen Dank. Ich möchte es jedoch entfernen, wenn ich eine Spalte verwende. Ich möchte mich wirklich nicht mit dem Kern-Bootstrap-CSS anlegen. Ich vermute, es muss einen sanktionierten Weg geben, dies zu tun. Irgendwelche Gedanken?
Tim
1
Wenn Sie die Spalte in voller Breite verwenden möchten, können Sie col-md-12 col-sm-12 css innerhalb der Zeile anwenden
Kishore Kumar
2
Vielen Dank. Ich habe das versucht, aber ich bekomme immer noch Polsterung. Außerdem brauche ich zwei Spalten. Vermisse ich etwas
Tim
1
Das angezeigte Auffüllen ist standardmäßig von Bootstrap. Wenn Sie es entfernen möchten, müssen Sie Ihre eigene Klasse hinzufügen. Wenn Sie eine neue Klasse hinzufügen und Bootstrap überschreiben möchten, können Sie! Wichtig nach dem Stil hinzufügen.
Kishore Kumar
1
Wenn zwei Spalten Sie können diese Klasse zu Ihrer Spalte col-md-6
Kishore Kumar
26

5 Jahre sind vergangen, und es ist ziemlich seltsam, dass es dort so viele Antworten gibt, die nicht den Bootstrap- Regeln folgen (oder gegen diese verstoßen) oder die Frage nicht wirklich beantworten ...

Kurze Antwort:
Verwenden Sie einfach die Bootstrap- no-guttersKlasse in Ihrer Zeile, um die Polsterung zu entfernen:

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

(Außerdem haben Sie vergessen, </div>am Ende Ihrer Datei hinzuzufügen . Dies wurde auch im obigen Code behoben.)

Hinweis:

Es gibt Fälle, in denen Sie auch die Polsterung des Behälters selbst entfernen möchten . In diesem Fall sollten Sie löschen .containeroder .container-fluidKlassen wie in der Dokumentation empfohlen in Betracht ziehen .

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

Lange Antwort:

Die Polster, die Sie erhalten, sind in der Bootstrap- Dokumentation dokumentiert :

Zeilen sind Wrapper für Spalten. Jede Säule hat eine horizontale Polsterung (Rinne genannt), um den Abstand zwischen ihnen zu steuern. Diesem Auffüllen wird dann in den Zeilen mit negativen Rändern entgegengewirkt. Auf diese Weise wird der gesamte Inhalt Ihrer Spalten auf der linken Seite visuell ausgerichtet.

Und über die Lösung, die ebenfalls dokumentiert wurde:

Spalten haben eine horizontale Auffüllung, um die Rinnen zwischen einzelnen Spalten zu erstellen. Sie können jedoch den Rand aus Zeilen entfernen und Spalten mit .no-Rinnen in der Zeile auffüllen.

Zum Ablegen des Behälters:

Benötigen Sie ein Design von Kante zu Kante? Lassen Sie die übergeordnete .container- oder .container-Flüssigkeit fallen.

Bonus: Über die Fehler in den anderen Antworten

  • Vermeiden Sie es, die Containerklassen von bootstrap zu hacken, anstatt sicherzustellen, dass Sie den gesamten Inhalt in col-s eingefügt und mit row-s umschlossen haben, wie in der Dokumentation angegeben :

In einem Rasterlayout muss der Inhalt in Spalten platziert werden, und nur Spalten dürfen unmittelbare untergeordnete Elemente von Zeilen sein.

  • Wenn Sie immer noch hacken müssen (nur für den Fall, dass jemand bereits etwas durcheinander gebracht hat und Sie Ihr Problem schnell beheben müssen), sollten Sie Bootstraps verwenden, px-0um stattdessen horizontale Auffüllungen zu entfernen pl-0 pr-0oder Ihre Stile neu zu erfinden.
Nur Schatten
quelle
3
.container-fluidenthält immer noch padding-right: 15pxund padding-left: 15px, was bedeutet, dass Sie mit Ihrer Methode immer noch nicht in der Lage sind, mit dem Fenster bündig zu werden. Sie müssten noch so etwas tun container-fluid px-0.
Lightyrs
2
In diesem Fall wird in der Dokumentation empfohlen, einfach "den übergeordneten .container oder die .container-Flüssigkeit fallen zu lassen". . Das habe ich auch in die Antwort aufgenommen.
Just Shadow
14

Ich glaube, ich hatte die gleichen Anforderungen wie Tim, aber keine der Antworten sieht eine Lösung für "Ansichtsfenster-Rand-zu-Rand-Spalten mit normalen internen Dachrinnen" vor. Oder anders ausgedrückt: Wie kann ich meine erste und letzte Spalte dazu bringen, in die Containerauffüllung einzubrechen und zum Rand des Ansichtsfensters zu fließen, während die normalen Rinnen zwischen den Spalten erhalten bleiben?

Reihen voller Breite

Soweit ich das beurteilen kann, gibt es keine saubere Lösung. Dies ist, was für mich funktioniert, aber es ist weit außerhalb von allem, was von Bootstrap unterstützt werden würde. Aber es funktioniert vorerst (Bootstrap 3.3.5 & 4.0-alpha).

http://www.bootply.com/ioWBaljBAd

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

Der Trick besteht darin, ein divZwischenzeichen zwischen der Zeile und den Spalten zu verschachteln, um den zusätzlichen Rand von -15 Pixel zu generieren, der in die Containerauffüllung gedrückt werden soll. Der zusätzliche negative Rand erzeugt einen horizontalen Bildlauf (in Leerzeichen) in kleinen Ansichtsfenstern. Hinzufügen overflow-x: hiddenzu.row ist erforderlich, um es zu unterdrücken.

Dies funktioniert genauso für .container-fluidwie .container.

Lucas Nelson
quelle
warum nicht einfach.full-width-row > div { padding: 0; }
Bamieh
Es funktioniert nicht, Sie bekommen immer noch eine Rinne am Anfang und Ende der Reihe: bootply.com/eM8y3kkfbi
Lucas Nelson
13

Hier ist die kurze Zusammenfassung für Bootstrap 4:

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

Für mich geht das.

Dm Mh
quelle
Für Bootstrap 4 ist dies die richtige Antwort und die beste Vorgehensweise.
Syafiq Freman
2
@SyafiqZainal, und es ist auch ein Duplikat meiner ursprünglichen Antwort unten (viel früher veröffentlicht): D Nun frage ich mich, ob es in Ordnung ist, dieselbe Antwort in StackOverflow zu veröffentlichen.
Just Shadow
funktioniert für mich, beste Antwort
Kashif Latif
6

Warum nicht die durch Behälterflüssigkeit hinzugefügte Polsterung negieren, indem Sie die linke und rechte Polsterung als 0 markieren?

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

noch besser? überhaupt keine Polsterung auf Containerebene (Reiniger)

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

iCrus
quelle
4
pl-0 pr-0kann geändert werden zupx-0
Patrick McDonald
3

Sie benötigen diese CSS-Eigenschaften nur in der .container-Klasse von Bootstrap und können das normale Rastersystem in ihn einfügen, ohne dass sich jemand aus dem Container außerhalb des Containers befindet (ohne scroll-x im Ansichtsfenster).

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
quelle
3

In den neuen Alpha-Versionen wurden Dienstprogramm-Abstandsklassen eingeführt . Die Struktur kann dann angepasst werden, wenn Sie sie auf clevere Weise verwenden.

Abstand Dienstprogrammklassen

<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-0und pr-0entfernt führende und nachfolgende Auffüllungen aus den Spalten. Ein Problem sind die eingebetteten Zeilen einer Spalte, da sie immer noch einen negativen Rand haben. In diesem Fall:

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

Versionsunterschiede

Beachten Sie auch, dass die Dienstprogrammabstandsklassen seit der Version geändert wurden 4.0.0-alpha.4. Bevor wurden sie von zwei Bindestriche getrennt zB => p-x-0und p-l-0und so weiter ...

So bleiben Sie beim Thema für Version 3: Dies ist das, was ich in Bootstrap 3-Projekten verwende und das Kompass-Setup für dieses spezielle Abstandsdienstprogramm in bootstrap-sass(Version 3) oder bootstrap(Version 4.0.0-alpha.3) mit doppelten Strichen oder einbinde bootstrap(Version 4.0.0-alpha.4 und höher) mit einzelnen Strichen.

Außerdem steigen die neuesten Versionen bis zum 5-fachen des Verhältnisses (z. B. pt-5Polsterung oben 5) anstelle von nur 3.


Kompass

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

CSS-Ausgabe

Natürlich können Sie die Füllabstandsklassen immer nur aus einer generierten CSS-Datei kopieren / einfügen.

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

Ich denke, niemand hat die richtige Antwort auf die Frage gegeben. Meine Arbeitslösung lautet: 1. Deklarieren Sie einfach eine andere Klasse zusammen mit dem Beispiel für eine Container-Fluid-Klasse (.maxx):

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

  1. Verwenden Sie dann die Spezifität im CSS-Teil, um Folgendes zu tun:

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

Dies funktioniert zu 100% und entfernt die Polsterung von links und rechts. Ich hoffe das hilft.

Sahil Kumar Singh
quelle
2
Wie wäre es mit px-0einer linken und rechten Polsterung für Bootstrap 4
Vincent Liong
1

Wenn Sie mit der Konfiguration arbeiten, können Sie die @grid-gutter-widthvon 30pxbis einstellen0

Stefan
quelle
1

Ich habe verwendet <div class="container-fluid" style="padding: 0px !important"> und es scheint zu funktionieren.

Dave
quelle
2
könnte Stil vermeiden und stattdessen die Utility-Klasse hinzufügenp-0
iCrus
0

Ich habe selbst damit gekämpft und ich glaube endlich, dass ich es herausgefunden habe. Es ist unglaublich, wie viele fehlgeschlagene Antworten auf diese Frage vorliegen

Alles, was Sie tun müssen, ist, die Polsterung von all Ihren .col-Elementen zu entfernen und die Polsterung auch von der .container-Flüssigkeit zu entfernen.

Ich habe dies in meinem eigenen Projekt etwas schlampig gemacht, indem ich meiner CSS-Datei Folgendes hinzugefügt habe:

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

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

Ich habe nur die verschiedenen Spaltengrößen dort, um all die verschiedenen Spaltengrößen zu berücksichtigen, die ich verwende. Ich bin zuversichtlich, dass es eine sauberere Möglichkeit gibt, das CSS zu schreiben, aber dies zeigt das Endergebnis.

Max Flanagan
quelle
0

Verwenden Sie px-0auf containerund no-guttersauf row, um die Polster zu entfernen.

Zitat aus Bootstrap 4 - Grid-System :

Zeilen sind Wrapper für Spalten. Jede Säule hat eine horizontale Polsterung (Rinne genannt), um den Abstand zwischen ihnen zu steuern. Diesem Auffüllen wird dann in den Zeilen mit negativen Rändern entgegengewirkt. Auf diese Weise wird der gesamte Inhalt Ihrer Spalten auf der linken Seite visuell ausgerichtet.

Spalten haben eine horizontale Auffüllung, um die Rinnen zwischen einzelnen Spalten zu erstellen. Sie können jedoch den Rand aus Zeilen und die Auffüllung aus Spalten mit .no-guttersauf entfernen .row.

Es folgt eine Live-Demo:

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>

Der Grund dieser Arbeiten ist , dass container-fluidund colbeide haben folgenden padding:

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

px-0kann die horizontale Polsterung aus entfernen container-fluidund no-guttersdie Polster aus entfernen col.

Wenhe Qi
quelle