Ich möchte, dass mein Inhalt flüssig ist, aber wenn ich ihn .container-fluid
mit 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;
Antworten:
Sie sollten auch jedem Container eine "Zeile" hinzufügen, die dieses Problem "behebt"!
Siehe http://jsfiddle.net/3px20h6t/
quelle
row
Klasse auch direkt mitcol-**-*
Klassen verwenden, wenn Ihr Layout passt.row
verwendet 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.Das aktuelle CSS finden Sie in Bootstrap
Wenn Sie eine
.container-fluid
Klasse hinzufügen, wird eine horizontale Auffüllung von 15 Pixel hinzugefügt. Diese wird entfernt, wenn Sie eine.row
Klasse als untergeordnetes Element am negativen Rand der Zeile hinzufügen .quelle
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-gutters
Klasse in Ihrer Zeile, um die Polsterung zu entfernen:(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
.container
oder.container-fluid
Klassen wie in der Dokumentation empfohlen in Betracht ziehen .Lange Antwort:
Die Polster, die Sie erhalten, sind in der Bootstrap- Dokumentation dokumentiert :
Und über die Lösung, die ebenfalls dokumentiert wurde:
Zum Ablegen des Behälters:
Bonus: Über die Fehler in den anderen Antworten
col
-s eingefügt und mitrow
-s umschlossen haben, wie in der Dokumentation angegeben :px-0
um stattdessen horizontale Auffüllungen zu entfernenpl-0 pr-0
oder Ihre Stile neu zu erfinden.quelle
.container-fluid
enthält immer nochpadding-right: 15px
undpadding-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 tuncontainer-fluid px-0
.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:
CSS:
Der Trick besteht darin, ein
div
Zwischenzeichen 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ügenoverflow-x: hidden
zu.row
ist erforderlich, um es zu unterdrücken.Dies funktioniert genauso für
.container-fluid
wie.container
.quelle
.full-width-row > div { padding: 0; }
Hier ist die kurze Zusammenfassung für Bootstrap 4:
Für mich geht das.
quelle
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">
quelle
pl-0 pr-0
kann geändert werden zupx-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:
CSS:
quelle
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
pl-0
undpr-0
entfernt 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: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-0
undp-l-0
und 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) oderbootstrap
(Version 4.0.0-alpha.3) mit doppelten Strichen oder einbindebootstrap
(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-5
Polsterung oben 5) anstelle von nur 3.Kompass
CSS-Ausgabe
Natürlich können Sie die Füllabstandsklassen immer nur aus einer generierten CSS-Datei kopieren / einfügen.
quelle
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):
Dies funktioniert zu 100% und entfernt die Polsterung von links und rechts. Ich hoffe das hilft.
quelle
px-0
einer linken und rechten Polsterung für Bootstrap 4Wenn Sie mit der Konfiguration arbeiten, können Sie die
@grid-gutter-width
von30px
bis einstellen0
quelle
Ich habe verwendet
<div class="container-fluid" style="padding: 0px !important">
und es scheint zu funktionieren.quelle
p-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:
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.
quelle
Verwenden Sie
px-0
aufcontainer
undno-gutters
aufrow
, um die Polster zu entfernen.Zitat aus Bootstrap 4 - Grid-System :
Es folgt eine Live-Demo:
Der Grund dieser Arbeiten ist , dass
container-fluid
undcol
beide haben folgenden padding:px-0
kann die horizontale Polsterung aus entfernencontainer-fluid
undno-gutters
die Polster aus entfernencol
.quelle