Wie füge ich class="row"
Elementen mithilfe des Twitter-Bootstrap-Frameworks einen Rand nach oben hinzu ?
css
twitter-bootstrap
da ich bin
quelle
quelle
Ok, nur um dich wissen zu lassen, was dann passiert ist, habe ich einige neue Klassen verwendet, wie Acyra oben sagt:
wann immer ich will, tue ich
<div class="row top7"></div>
Für eine bessere Reaktionsfähigkeit können Sie
margin-top:7%
anstelle von5px
beispielsweise hinzufügen : D.quelle
.top-buffer { margin-top:20px; }
unterscheidet sich von.top30 { margin-top:30px; }
? Nun, aus der Sicht eines jeden Entwicklers: Es ist das gleiche. Anpassungen an den Anwendungsfall zählen hier nicht. Insbesondere nicht, wenn das OP seine eigene Frage beantwortete.Bootstrap 3
Wenn Sie Zeilen im Bootstrap trennen müssen, können Sie einfach verwenden
.form-group
. Dadurch wird am unteren Rand der Zeile ein Rand von 15 Pixel hinzugefügt.In Ihrem Fall können Sie diese Klasse zum vorherigen
.row
Element hinzufügen, um den oberen Rand zu erhaltenBootstrap 4
Sie können integrierte Abstandsklassen verwenden
Das "t" im Klassennamen bewirkt, dass es nur für die "obere" Seite gilt. Es gibt ähnliche Klassen für unten, links, rechts. Die Nummer definiert die Raumgröße.
quelle
form-group
ist noch vorhanden , aber es wurden spezielle Klassen für Rand / Polsterung hinzugefügt, die die Aufgabe erfüllen können und über mehr Optionen verfügen.mt-3
funktioniert nicht so gebrauchtform-group
Für Bootstrap 4 sollte der Abstand mit verwendet werden
im folgenden Format:
Wo Eigentum ist eines von:
Wo Seiten ist eine von:
Wo Größe ist eine von:
Sie sollten also Folgendes tun:
Lesen Sie die Dokumente für weitere Erklärungen. Probieren Sie hier Live-Beispiele aus .
quelle
Manchmal kann Rand oben Designprobleme verursachen:
http://www.w3.org/TR/CSS2/box.html#collapsing-margins
Daher empfehle ich, "Rand-Unter-Klassen" anstelle von "Rand-Ober-Klassen" zu erstellen und sie auf das vorherige Element anzuwenden.
Wenn Sie Bootstrap verwenden, um WENIGER Bootstrap-Dateien zu importieren, versuchen Sie, die Klassen am unteren Rand mit proportionalen Bootstrap-Themenbereichen zu definieren:
quelle
Ich habe diese Klassen meinem Bootstrap-Stylesheet hinzugefügt
Beispiel
quelle
Ich verwende diese Klassen, um den oberen Rand zu ändern:
Wenn ich ein Element mit einem Abstand von 2em zum obigen Element benötige, verwende ich es folgendermaßen:
Wenn Sie Pixel bevorzugen, ändern Sie das em in px, damit es Ihren Wünschen entspricht.
quelle
<div class="row margin-top-20">
über<div class"row" style="margin-top: 2.0em">
?Sie können die folgende Klasse für Bootstrap 4 verwenden:
mt-0
mt-1
mt-2
mt-3
mt-4
...Ref: https://v4-alpha.getbootstrap.com/utilities/spacing/
quelle
Bootstrap 4 alpha, für Rand oben: Kurzschrift CSS-Klassennamen mt-1, mt-2 (mt-lg-5, mt-sm-2) gleich unten, rechts, links, und Sie haben auch die automatische Klasse ml- Auto
Einheiten sind von
1
bis5
: in der Variablen.scss, was bedeutet, wenn Sie mt-1 setzen, gibt es .25rem Rand oben.Lesen Sie hier mehr
https://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering
quelle
Fügen Sie dieser Klasse in der CSS-Datei Folgendes hinzu:
oder erstellen Sie eine neue Klasse und fügen Sie sie dem Element hinzu
quelle
Wenn Sie nur auf einer Seite ändern möchten, fügen Sie die folgende Stilregel hinzu:
quelle
In Bootstrap 4 alpha + können Sie dies verwenden
Die Klassen werden im folgenden Format benannt:
{property}-{sides}-{size}
quelle
quelle
Bootstrap3
CSS (nur Dachrinne, ohne Ränder):
CSS (gleiche Ränder, 15px / 2):
Verwendungszweck:
(mit SASS oder WENIGER könnte 15px eine Variable von Bootstrap sein)
quelle
einfacher Code
quelle
Sie können diesen Code hinzufügen:
quelle
Verwenden Sie diesen
bs3-upgrade
Helfer einfach für Abstände und Textausrichtung ...https://github.com/studija/bs3-upgrade
quelle
Wenn Sie BootStrap 3.3.7 verwenden, können Sie den Bootstrap-Spacer der Open Source-Bibliothek über NPM verwenden
oder Sie können die Github-Seite besuchen:
Hier ist ein Beispiel, wie dies funktioniert, um Zeilen mithilfe der .row-spacer-Klasse zu platzieren:
Wenn Sie Leerzeichen zwischen Spalten benötigen, können Sie auch die Klasse .row-col-spacer hinzufügen:
Sie können auch verschiedene Klassen .row-spacer und .row-col-spacer miteinander kombinieren:
quelle
Mein Trick. Nicht so sauber, funktioniert aber gut für mich
quelle