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

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;

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/

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 .

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.

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?

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.

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.

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

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

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

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>

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

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

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

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.

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.