Bootstrap 3 und 4 .container-fluid mit raster hinzufügen unerwünschte Polsterung
Ich würde gerne meine Inhalte zu flüssig, aber wenn .container-fluid mit Bootstrap grid, ich bin immer noch zu sehen-Polsterung. Wie kann ich loswerden der Polsterung?
Sehe ich, dass ich nicht bekommen, die Polsterung mit .Reihe, aber ich möchte hinzufügen, Spalten, und so schnell wie ich, die Polsterung ist zurück :O.
Ich möchte in der Lage sein zu verwenden, die Spalten in voller Breite.
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:
Bootstrap überschreiben.css, linke 1427 & 1428 (v3.2.0)
padding-right: 15px;
padding-left: 15px;zu
padding-right: 0px;
padding-left: 0px;- kann nützlich sein, leejacksondev.com/...
- Können Sie Ihre relevanten code, so können wir Ihnen unsere Antworten zu Ihrem code?
- Aktualisiert mit code! Ich möchte zu entfernen, padding, wenn ich eine Spalte, und nicht nur wenn ich mit einer Zeile.
- seine nicht die richtige Lösung! ich schlug mit gehen an @Teil beantworten
Schreibe einen Kommentar
Du musst angemeldet sein, um einen Kommentar abzugeben.
Sollten Sie auch hinzufügen einer "Zeile", um die einzelnen container, die "fix" - diese Frage!
Sehen http://jsfiddle.net/3px20h6t/
rowKlasse direkt mitcol-**-*Klassen, wenn Sie Ihr layout passt.rowverwendet wird ... aber nicht, wenn die Spalten verwendet werden (für die, dass die Tatsache ignoriert wird in dieser Antwort)? Wie auch immer, ich bin immer die gleiche fehlerhafte 15px padding als die Frage skizziert, und es ist sehr frustrierend..containerfür desktop-Computer und loszuwerden, diese dumme Lücke für mobile?Finden Sie die aktuelle css von Bootstrap
Beim hinzufügen eines
.container-fluidKlasse, es fügt eine horizontale padding von 15px, und das gleiche wird entfernt werden, wenn Sie fügen Sie eine.rowKlasse als child-element von der negativen margin-Satz auf Zeile.colhinzufügen von Links und rechts padding von 15px insgesamt von 30px. Und es zeigt auch, dass dierowwird dies korrigieren, indem Sie die Einstellung ein -15px linken/rechten Rand. Aber die Dokumentation besagt nichts übercontainer-fluidhinzufügen Ihrer eigenen Polsterung? Wenn das stimmt, dann macht es das ganzerowKorrektur ziemlich nutzlos, und somit ausgeglichen Ergebnis wie die Frage, Staaten vor und wie ich es immer bin.Ich glaube, ich hatte die gleiche Anforderung wie Tim, aber keine Antworten liefern, die für ein "- viewport-Rand-zu-Rand-Spalten mit normalen internen Dachrinnen' Lösung. Oder anderes ausgedrückt: wie bekomme ich meinen ersten und letzten Spalten, brechen in die container Polsterung und die Strömung an den Rand des Viewports, während immer noch die Aufrechterhaltung der normalen Dachrinnen, die zwischen den Spalten.
Was ich sagen kann, es gibt keine saubere und ordentliche Lösung. Das ist was für mich funktioniert, aber es ist gut, außerhalb alles, was sein würde, unterstützt von Bootstrap. Aber es funktioniert jetzt (Bootstrap 3.3.5 & 4.0-alpha).
http://www.bootply.com/ioWBaljBAd
Beispiel-HTML:
CSS:
Der trick ist, ein nest
divim zwischen der Zeilen-und der Spalten zu generieren, die extra -15px margin-push in den container Polsterung. Die zusätzliche negative Marge schafft horizontale Bildlaufleiste (in Leerzeichen) auf kleinen viewports. Hinzufügenoverflow-x: hiddenzu den.rowerforderlich ist, um Sie zu unterdrücken.Dies funktioniert auf die gleiche für
.container-fluidals.container..full-width-row > div { padding: 0; }5 Jahre vergangen, und es ist sehr merkwürdig, dass es so viele Antworten gibt, die nicht Folgen (oder gegen) bootstrap-Regeln oder nicht, die Antwort auf die Frage...
Kurze Antwort
Einfach die Verwendung von Bootstrap ist
no-guttersKlasse in Ihrer Reihe zu entfernen, Polsterung:(Auch Sie vergessen haben, fügen Sie
</div>an das Ende der Datei. Es ist fest in den code oben als auch)Lange Antwort
Die Polster bekommst du tatsächlich dokumentiert in Bootstrap ist Dokumentation:
Und über die Lösung, die war ebenso dokumentiert:
Bonus: Über die Fehler, die gefunden werden, auf die anderen Antworten
col-s und wickelte Sie mitrow-s als Dokumentation sagt:px-0für das entfernen von horizontalen Polstern stattpl-0 pr-0oder erfinden Sie Ihre Stile..container-fluidenthält nochpadding-right: 15pxundpadding-left: 15px, was bedeutet, dass Sie immer noch nicht in der Lage sein, um bündig mit dem Fenster mit deiner Methode. Sie müssen noch etwas tun, wiecontainer-fluid px-0.Brauchen Sie nur diese CSS-Eigenschaften in .container-Klasse von Bootstrap und Sie können ihn innerhalb der normalen grid-system, ohne dass jemand die Inhalte der container wird aus ihm (ohne scrollen- " x " in der viewport).
HTML:
CSS:
In der neuen alpha-Versionen, die Sie eingeführt haben,utility-spacing-Klassen.
Die Struktur kann dann optimiert werden, wenn du diese in eine clevere Art und Weise.
Abstand utility-Klassen
pl-0undpr-0entfernen führende und nachfolgende Polsterung aus den Spalten.Ein Problem der linken ist die embedded-Zeilen einer Spalte, als Sie auch noch negative Marge. In diesem Fall:
Version Unterschiede
Beachten Sie auch die utility-spacing-Klassen wurden verändert, seit version
4.0.0-alpha.4.Zuvor waren Sie getrennt durch 2 Bindestriche z.B. =>
p-x-0undp-l-0und so weiter ...Um beim Thema zu bleiben für die version 3: Dies ist, was ich auf Bootstrap 3 Projekte und umfassen den Kompass, setup, für diese bestimmten Abstand Dienstprogramm, in
bootstrap-sass(version 3) oderbootstrap(version 4.0.0-alpha.3) mit doppelten Bindestrichen oderbootstrap(version 4.0.0-alpha.4) mit einzelnen Strichen.Auch die neueste version(N) gehen 'bis 5 mal pro ratio (ex:
pt-5padding-top 5) anstelle von nur 3.Kompass
CSS-Ausgabe
Können Sie natürlich immer mit kopieren/einfügen padding spacing-Klassen nur aus einem generierten css-Datei.
Warum nicht negieren die Polsterung Hinzugefügt von container-fluid durch die Markierung Links und rechts padding 0?
<div class="container-fluid pl-0 pr-0">sogar besseren Weg? keine Polsterung an der container-Ebene (cleaner)
<div class="container-fluid pl-0 pr-0">pl-0 pr-0kann geändert werden, umpx-0Ich denke, niemand hat die richtige Antwort auf die Frage.
Meine funktionierende Lösung ist :
1. Nur erklären anderen Klasse zusammen mit container-fluid class Beispiel(.maxx):
HTML:
CSS:
Diese wird 100% ig funktionieren, und entfernen Sie die Polsterung von Links und rechts.
Ich hoffe, das hilft.
px-0zu gesetzten Links und rechts Polsterung für Bootstrap 4So, hier ist die kurze Zusammenfassung für die Bootstrap-4:
Es funktioniert für mich.
Wenn Sie mit der configuratior können Sie die
@grid-gutter-widthaus30pxzu0Habe ich verwendet
<div class="container-fluid" style="padding: 0px !important">und es scheint zu funktionieren.
p-0Ich habe gekämpft, mit diesem mich und ich endlich glaube, ich habe es herausgefunden. Es ist unglaublich, wie viele fehlerhafte Antworten gibt es auf diese Frage
Alles, was Sie tun müssen ist, entfernen Sie die Polsterung von allen .col-Elemente, und entfernen Sie die Polsterung auch aus der .container-fluid.
Habe ich in meinem eigenen Projekt ein wenig nachlässig, indem Sie den folgenden, um meine css-Datei:
Ich habe nur die verschiedenen col Größen gibt, um für die verschiedenen col Größen, die ich verwende. Ich bin sicher, es ist eine sauberere Art zu schreiben der css, aber das zeigt das Endergebnis.