bootstrap container-fluid - entferne Ränder richtig (Überlauf)

Um genau zu Ihrer Frage zu sein:

.row hat einen negativen linken und rechten Rand, der dem linken / rechten Füllwert von col-*-* entspricht. 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.

Also lautet die Antwort: .container-fluid > .row - Machen Sie den Rand: 0 links und rechts, wenn Sie das Padding links und rechts von den Spaltenklassen entfernen. Wenn alles null ist, dann können Sie einfach die .container oder .container Flüssigkeit mit Null-Padding links und rechts anpassen, aber wenn Sie andere Werte & gt; 15px L & amp; R, dann ist es eine andere Geschichte, da das .container/.container-fluid angepasst werden muss, wenn das linke und rechte Padding in den Spalten größer als 15px ist.

Es gibt keine Ränder auf dem col-*-* Padding, was bei Verwendung von Box-Sizing ganz anders ist: border-box global wie bei Boostrap 3.

Wenn Sie ein enges Raster wünschen, entfernen Sie das gesamte Padding auf den links und rechts aller Spaltenklassen und entfernen dann das negative Marge auf der links und rechts von .row , und dann können Sie die linke und rechte entfernen padding auf der .container .

DEMO: Ссылка

Entfernt das gesamte Padding und den negativen Rand für ein enges Raster und die gesamte Breite des Containers mit jedem umgebenden Element (body, html, was auch immer) mit der Klasse .alt-grid :

Sie können dies auch mit .container-fluid tun - das einzige, was Sie auf Null setzen können, ist das linke und rechte Padding.

Wenn Sie den Rand entfernen möchten, ist es nicht das Beste, die Bootstrap-Klasse oder div (container-fluid, html, body) zu überschreiben. Ich denke, es ist besser, eine separate Klasse zu erstellen und sie in Elementen hinzuzufügen. Wenn Sie alle Ränder entfernen möchten:

Wenn Sie alle Ränder und Abstände entfernen möchten:

es ist immer ein besserer Weg, um 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; }