2016-09-01 5 views
0

Ich bin über diesen Teil des Codes in den Quellcode von Bootstrap 3.3.5 Über Bootstrap Grid System

/*line 1585 - 1590*/ 
.container { 
    padding-right: 15px; 
    padding-left: 15px; 
} 
/* line 1612 - 1615*/ 
.row { 
    margin-right: -15px; 
    margin-left: -15px; 
} 

verwirrt, was sie verwendet werden?
-------------------------------
Danke Jungs!
Dies ist meine Meinung nach dem Lesen Ihrer Antworten:
1.Add Padding zum .container macht den Inhalt von. Container weg von der boudary;
2. Aber das bedeutet jetzt die erste/letzte Spalte ist 2 Paddings weg von der Grenze, nicht so nett. Fügen Sie also einen negativen Rand hinzu, um ihn zur Grenze zu führen.
Bin ich richtig?
BTW, ich habe diese Frage gestellt, weil ich nicht den Unterschied sehe, ob ich diese zwei Regeln lösche oder nicht.

+0

Warum fragen Sie? Hast du die Bootstrap-Dokumentation gelesen? http: // getbootstrap.com/css/# grid – Lee

+1

Bootstrap Dokumentation ist genug, um Sie zu unterrichten, wenn Sie studieren werden. und wenn diese padding nicht wollen dnt sie verwenden oder schreiben Sie Ihre eigenen Klassen ein css – mean

Antwort

1

Im Allgemeinen fügt der Container, wie er angibt, links und rechts eine Auffüllung hinzu, so dass der Inhalt nicht direkt an den Bildschirmrand reicht, wodurch er für Mobiltelefone verwendbar und einfacher zu lesen ist. Wenn Sie Spalten verwenden, fügen sie links und rechts eine Auffüllung hinzu, die mit dem Rest des Inhalts "nicht mehr ausgerichtet" sein kann. Sie können diese also in einer Reihe umbrechen, indem Sie negative Ränder verwenden, um diese Auffüllung wieder in Übereinstimmung zu bringen der Rest des Inhalts.

Auch dies ist, damit es mehr ausgerichtet und sauber erscheint.

Von der Bootstrap Dokumentation (http://getbootstrap.com/css/#grid):

Zeilen innerhalb einer .Behälter (feste Breite) oder .Behälter-Fluid (voller Breite) für die richtige Ausrichtung und Polsterung gelegt werden muss.

Verwenden Sie Zeilen, um horizontale Gruppen von Spalten zu erstellen.

Der Inhalt sollte innerhalb von Spalten platziert werden, und nur Spalten können unmittelbare untergeordnete Zeilen sein.

+0

Danke! 1.Add Padding zum .container macht den Inhalt von .container weg von der Boudary; 2. Aber das bedeutet jetzt, dass die erste/letzte Spalte 2 Abstände von der Grenze entfernt ist, nicht so schön. Fügen Sie also einen negativen Rand hinzu, um ihn zur Grenze zu führen. Habe ich recht? Übrigens habe ich diese Frage gestellt, weil ich den Unterschied nicht sehe, ob ich diese zwei Regeln lösche oder nicht. – Rubicker

+0

Also ja, das ist im Grunde richtig, wenn Sie zwei Spalten innerhalb eines '.container' haben, werden sie 15px Padding links und rechts von den Spalten haben. Wenn Sie diese beiden Spalten innerhalb eines '.row's einordnen, werden diese Spalten an die absoluten Grenzen des' .container'-Divs verschoben, wodurch sie wieder gut ausgerichtet werden. – Lee

1

Zeilen sollten immer innerhalb eines Containers platziert werden, um den richtigen Abstand (zwischen Seiteninhalt und dem Rand des Browsers) zu gewährleisten. Wenn Sie keine Zeile in einen Container einfügen, ist die Zeile breiter als die Breite des Ansichtsfensters und verursacht eine horizontale Bildlaufleiste.

Die Bootstrap-Zeile verwendet negative Ränder, um der Auffüllung des Containers entgegenzuwirken. Das Endergebnis ist kein visueller Abstand (Rand oder Füllung) an den Seiten der Reihe innerhalb des Containers. Dies ist wichtig für reaktionsfähige Designs, um gleichmäßige Abstände zu gewährleisten, da die Spalten vertikal umbrochen oder gestapelt werden können (Änderung der Anzahl der in jeder Zeile angezeigten Spalten).

Siehe auch:
Bootstrap 3 Rows and Columns
How the Bootstrap grid works

0

Bootstrap Spalten 15px linke und rechte Polsterung haben, so dass deren Inhalt richtig heraus angeordnet ist. Dies schiebt jedoch den Inhalt der ersten und letzten Spalte 15 px von dem Elternteil weg. Um dies zu kompensieren, hat die Zeile negative linke und rechte 15px-Ränder. Deshalb sollten Sie immer Spalten innerhalb von Zeilen platzieren.

Verwandte Themen