Bootstrap 3 - Warum ist die Zeilenklasse breiter als ihr Container?

116

Ich habe gerade angefangen, Bootstrap 3 zu verwenden. Es fällt mir schwer zu verstehen, wie die Zeilenklasse funktioniert. Gibt es eine Möglichkeit, das padding-leftund zu vermeiden padding-right?

<div class="row" style="background:#000000">           
  <div class="col-xs-4 .col-xs-offset-1">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
  <div class="col-xs-2">
    col
  </div>
</div>

http://jsfiddle.net/petran/rdRpx/

twitter-bootstrap twitter-bootstrap-3 Petran
quelle
@Adrift ist das noch wahr? Ich bin mir nicht sicher, ob Sie meinen, dass sie nicht richtig funktionieren, weil ich sie verwendet habe und sie scheinen so zu funktionieren, wie sie sollten.
Getreide
1
@Cereal: Nicht mehr. Dies wurde hinzugefügt in v3.0.2
adrift
3
weil die Bootstrap-Zeile am linken und rechten Rand -15px hat.
Wahrscheinlich nicht Ihr Problem, aber für alle anderen, die die gleiche Art von Problem haben: Stellen Sie sicher, dass Ihre Divs nur ein Klassenattribut haben. Ich habe sie versehentlich verdoppelt und das gleiche Problem bekommen.
The One True Colter

Antworten:

151

In allen Rastersystemen befinden sich zwischen jeder Säule Dachrinnen. Das Bootstrap-System legt links und rechts von jeder Spalte eine 15-Pixel-Polsterung fest, um diese Rinne zu erstellen.

Das Problem ist, dass die erste Spalte links keine halbe Rinne und die letzte rechts keine halbe Rinne haben sollte. Anstatt eine Art .firstoder .lastKlasse für diese Spalten zu verwenden, wie dies bei einigen Rastersystemen der Fall ist, setzen sie die .rowKlasse so, dass sie negative Ränder aufweist, die mit dem Auffüllen der Spalten übereinstimmen. Dies "zieht" die Dachrinnen von der ersten und der letzten Säule ab und macht sie gleichzeitig breiter.

Das .rowdiv sollte niemals wirklich verwendet werden, um etwas anderes als Gitterspalten zu halten. Wenn dies der Fall ist, wird der Inhalt relativ zu den Spalten verschoben, wie aus Ihrer Geige hervorgeht.

AKTUALISIEREN:

Sie haben Ihre Frage geändert, nachdem ich sie beantwortet habe. Hier ist die Antwort auf die Frage, die Sie jetzt stellen: Fügen Sie die .containerKlasse der ersten hinzu <div>. Siehe Arbeitsbeispiel .

Sean Ryan
quelle
2
Rasterspalten werden durch Klotzen, nicht Spanne (in BS3) getrennt
treiben
3
Toll! Das erklärt den überfüllten Inhalt.
Rutwick Gangurde
27

Mit Bootstrap 3.3.7 ist dieses Problem gelöst, indem die .row mit .container-fluid umwickelt wird.

Dbarma
quelle
Das hat bei mir funktioniert, obwohl ich anfangs dachte, dass es nicht so ist, weil ich die Webkonsole des Entwicklers geöffnet hatte, was die Breite verringert, aber anscheinend auch das durcheinander bringt. Die Verwendung .container-fluidwurde auch hier vorgeschlagen: stackoverflow.com/a/23616447/5272567
Matthias
funktioniert auch, wenn das umhüllende div positioniert ist absolute. danke für den Hinweis
InsOp
wenn ich diese Antwort mehrmals
hochstimmen
Gleiches Update für Bootstrap 4.
Rob L
19

Siehe meine Antwort unten auf einen ähnlichen Beitrag.

Warum hat der Bootstrap .row einen Standardrand von -30px links?

Sie verwenden grundsätzlich "clearfix" anstelle von "row". Es macht genau das gleiche wie "Zeile" ohne den negativen Rand.

Kyle
quelle
2
Diese Klassen machen zwei verschiedene Dinge, obwohl sie es visuell zu tun scheinen. Clear ist in Reaktionssituationen nicht so flexibel und bei Rastersystemen ist das Verhalten von .row korrekt.
Todd Baur
Dies löst überlaufende Inhalte außerhalb des Wrappers.
Bhojendra Rauniyar
Besser ist es jedoch, die Reihe mit einem Container zu umwickeln.
Bhojendra Rauniyar
BESTE ASWER! OBEN!
Anderson Bressane
18

Ich habe die Zeilenklasse innerhalb der Containerklasse verwendet und hatte immer noch ein Problem. Als ich margin-left: auto; margin-right: auto;zur .rowKlasse hinzufügte , funktionierte es gut.

Jeffrey
quelle
8
Das hat wie ein Zauber gewirkt! Das Hinzufügen der Klasse 'mx-auto' in Bootstrap 4 hat das Überlaufproblem für mich behoben.
Michelle M.
3

@Michelle M. sollte für diese Antwort die volle Gutschrift erhalten.
Sie sagte in einem der Kommentare:

Das Hinzufügen der Klasse 'mx-auto' in Bootstrap 4 hat das Überlaufproblem für mich behoben.

Sie müssten Ihr erstes divElement folgendermaßen aktualisieren :

<div class="row mx-auto" style="background:#000000">

Sie müssen dies nicht für alle verschachtelten Zeilen tun (falls vorhanden). Fügen Sie
einfach mx-autodie äußersten row(oder Zeilen) hinzu, um die vertikale Bildlaufleiste zu vermeiden.
Überschreiben Sie nicht das Verhalten aller Bootstrap-Zeilen, indem Sie eine "Zeilen" -Klasse hinzufügen, um die Ränder zu ersetzen.

MikeTeeVee
quelle
1

Für zukünftige Entwickler, die dieses Problem debuggen:

Bootstrap legt die Auffüllung für Zeilenspalten fest, sodass der Inhalt einer Zeile nicht außerhalb des Containers angezeigt werden darf. Wenn dies auftritt und Sie das Bootstrap-Rastersystem korrekt mit den Klassen col -... verwenden, ist es wahrscheinlich, dass Sie irgendwo über zusätzliches CSS verfügen, das das Auffüllen der Spalten zurücksetzt.

JSideris
quelle
Oder Sie haben eine alte Version von Bootstrap. Zum Beispiel 3.0.0, verteilt mit VS2015. Siehe github.com/twbs/bootstrap/issues/8959
Abenteuer