Wie kann ich alle Ränder aus der Boartrap container-fluid Klasse und ihren Reihen entfernen?bootstrap container-fluid - Ränder richtig entfernen (Überlauf)
.container-fluid { padding: 0;} does basically what I want but it adds 20px overflow to body..
Also sollte ich nur
body, html { overflow-x: hidden; }
etwas tun mit .container-fluid > .row
Um über Ihre Frage spezifisch zu sein:
Die .row hat eine negative links und der rechte Rand ist gleich dem linken/rechten Füllwert der col-*-*, deshalb gibt es horizontale Bildlaufleisten, wenn Sie mit dem Gitter herumspielen, ohne zu verstehen, wie es funktioniert. Wenn Sie die Spaltenklassen mit linker und rechter Nullauffüllung oder mit einem anderen Wert bearbeiten, muss der negative Rand auf der .row gleich dem Auffüllen links und rechts der Spaltenklassen sein. Der .container hat auch eine Auffüllung, die dem Wert der Spaltenklassen entspricht, um die Bildlaufleisten zu verhindern.
So lautet die Antwort: .container-fluid > .row - Machen Sie den Rand: 0 links und rechts, wenn Sie die Auffüllung links und rechts von den Spaltenklassen entfernen. Wenn alles null ist, dann können Sie einfach die .container oder .container Flüssigkeit mit Nullpolsterung auf der linken und rechten Seite anpassen, aber wenn Sie andere Werte> 15px L & R verwenden, dann ist es eine andere Geschichte als die .container/.container-fluid muss angepasst, wenn das linke und rechte Padding auf den Spalten größer als 15 Pixel ist.
Es gibt keine Ränder auf der col-*-* Es ist Padding, die ziemlich unterschiedlich ist, wenn Sie Box-Sizing verwenden: border-box global wie Boostrap 3 tut.
Wenn Sie ein knappes Gitter möchten, entfernen Sie alle Polster auf die und rechts aller Spaltenklassen nach links und dann entfernen die negativenMarge auf dem und rechts von links .row, und dann können Sie die linke und rechte Padding auf der .container entfernen.
DEMO: http://jsbin.com/jeqase/2/
alle padding Entfernt und negativen Marge für einen dichten Raster und volle Breite des .Behälter mit jedem umgebenden Elemente (Körper, html, was auch immer) mit der Klasse .alt-grid:
.alt-grid [class*="col-"] {padding-left:0;padding-right:0}
.alt-grid .row {margin-left:0;margin-right:0}
/* container adjusted */
.alt-grid .container {width:100%;max-width:none;padding:0;}
Sie können dies auch mit .container-fluid tun - die einzige Sache, um Null zu machen ist die linke und rechte Polsterung.
Wenn Sie Rand entfernen möchten, overidding die Bootstrap-Klasse oder div (Container-Flüssigkeit, html, Körper) ist nicht die beste Sache zu tun. Ich denke, es ist besser, eine separate Klasse zu erstellen und sie in Elementen hinzuzufügen. Wenn Sie alle Ränder entfernen:
.remove-all-margin{
margin:0 ! important;
}
Wenn Sie alle Ränder und Polsterungen entfernen möchten:
.remove-all-margin-padding{
margin:0 ! important;
padding:0 ! important;
}
es ist immer eine bessere Möglichkeit, den Elementen, die die Ränder entfernen sollen, eine benutzerdefinierte Klasse hinzuzufügen, anstatt alle Bootstrap-Elemente zu überschreiben.
row.no-margin{ margin:0 ! important; }