wake-up-neo.net

Die Bootstrap-Zeilenklasse enthält einen Rand links und einen Rand rechts, der Probleme verursacht

Ich benutze die Bootstrap-Klasse "row", um divs übereinander auszurichten, was aber gut funktioniert 

.row {
   margin-left: -15px;
   margin-right: -15px;
 }

Was mir aufgefallen ist, ist, dass die Margin-Left- und Margin-Right-Attribute -13px sind, wodurch mein Inhalt nach links verschoben wird. Was ich getan habe, ist eine weitere Klasse wie folgt hinzugefügt:

.row-no-margin {
   margin-left: 0px;
   margin-right: 0px;
} 

Dies löst den Zweck, aber ich würde trotzdem gerne wissen, ob es einen bestimmten Grund für 'margin-left: -15px; 'gibt. Und was ist der beste Ansatz, um mein Problem zu lösen.

35
Tarun Gupta

Der .row soll innerhalb einer container verwendet werden. Da die Variable container einen Abstand zum Anpassen des negativen Randes in .row aufweist, können sich die im .row verwendeten Rasterspalten auf die volle Breite des Containers anpassen. Siehe die Bootstrap-Dokumente: http://getbootstrap.com/css/#grid

Hier ein Beispiel zur Veranschaulichung: http://bootply.com/131054

Eine bessere Lösung kann es sein, dass Sie Ihren .row in einen .container oder .container-fluid einfügen.

69
Zim

Sie können statt der Reihe Reihenflüssigkeit verwenden, dann haben Sie dieses Problem nicht. (für frühere Versionen von Bootstrap)

Ich bin mir der jüngsten Version 3 in keiner Weise sicher:

Das Problem ist, dass die erste Spalte links keine halbe Dachrinne und die letzte Spalte rechts keine halbe Dachrinne haben sollte. Anstatt eine .first- oder .last-Klasse für diese Spalten zu verwenden, wie dies bei einigen Gittersystemen der Fall ist, wird stattdessen die .row-Klasse auf negative Ränder gesetzt, die der Auffüllung der Spalten entsprechen. Dies "zieht" die Dachrinnen der ersten und letzten Spalte ab und macht sie gleichzeitig breiter.

Weitere Informationen hierzu finden Sie hier Warum hat der Bootstrap .row einen Standardrand links von -30px?

6
4dgaurav

Verwenden Sie Bootstrap 3? Meine Version der CSS hat -15px, nicht -13px. Auf jeden Fall habe ich einfach das gemacht, was Sie nicht getan haben, und den Stil überschrieben. Ich glaube, es liegt daran, dass die Klasse .container links und rechts eine 15px-Auffüllung hat und dieser negative Rand in den Reihen zieht dieser Inhalt wird an den Rand des Containers zurückgegeben.

2
JesseEarley

Altes Thema, aber ich war kürzlich davon betroffen. 

Die Verwendung einer Klasse "Row-Fluid" anstelle von "Row" hat für mich gut funktioniert, aber ich bin mir nicht sicher, ob sie in Zukunft vollständig unterstützt wird. 

Also nach dem Lesen von Warum hat der Bootstrap .row einen voreingestellten linken Rand von -30px Ich habe gerade den <div> (ohne eine Zeilenklasse) verwendet, und er verhält sich genau wie <div class="row-fluid">

0
ShhTot

Ich stand vor demselben Problem und anfangs entfernte ich den rechten und linken Rand der Reihe und die horizontale Schriftrolle, aber das war nicht gut. Nach 45 Minuten Inspektion und Suche fand ich heraus, dass ich Behälterflüssigkeit verwendete und die Polsterung entfernte und die innere Reihe links und rechts einen negativen Rand hatte. Also gab ich Behälterflüssigkeit zurück, und es wurde wieder alles normal.

Wenn Sie das Entfernen von Behälterflüssigkeiten entfernen müssen, entfernen Sie nicht einfach den linken und rechten negativen Rand jeder Zeile in Ihrem Projekt, sondern führen Sie eine Klasse ein und verwenden Sie diese auf Ihrem gewünschten Behälter

0
Junaid