Twitter Bootstrap - oberen Abstand zwischen den Zeilen hinzufügen

Question

So fügen Sie einen oberen Rand zu class="row" Elemente mit Twitter Bootstrap Framework?

Answer 1

Ich habe diese Klassen zu meinem Bootstrap-Stylesheet hinzugefügt

.voffset  { margin-top: 2px; }
.voffset1 { margin-top: 5px; }
.voffset2 { margin-top: 10px; }
.voffset3 { margin-top: 15px; }
.voffset4 { margin-top: 30px; }
.voffset5 { margin-top: 40px; }
.voffset6 { margin-top: 60px; }
.voffset7 { margin-top: 80px; }
.voffset8 { margin-top: 100px; }
.voffset9 { margin-top: 150px; }

Beispiel

<div class="container">
  <div class="row voffset2">
    <div class="col-lg-12">
      <p>
        Vertically offset text.
      </p>
    </div>
  </div>
</div>

Answer 2

Ich verwende diese Klassen, um den oberen Rand zu ändern:

.margin-top-05 { margin-top: 0.5em; }
.margin-top-10 { margin-top: 1.0em; }
.margin-top-15 { margin-top: 1.5em; }
.margin-top-20 { margin-top: 2.0em; }
.margin-top-25 { margin-top: 2.5em; }
.margin-top-30 { margin-top: 3.0em; }

Wenn ich für ein Element einen Abstand von 2em zum darüber liegenden Element benötige, verwende ich es wie folgt:

<div class="row margin-top-20">Something here</div>

Wenn Sie Pixel bevorzugen, ändern Sie em in px, um es auf Ihre Art zu haben.

Answer 3

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/

Answer 4

Bootstrap 4 alpha, für margin-top: Kurzbezeichnung der CSS-Klassen mt-1, mt-2 ( mt-lg-5, mt-sm-2) dasselbe für unten, rechts, links, und Sie haben auch auto Klasse ml-auto

    <div class="mt-lg-1" ...>

Einheiten sind von 1 à 5 : in der Datei variables.scss das heißt, wenn Sie mt-1 einstellen, erhalten Sie einen oberen Rand von 0,25 cm.

$spacers: (
  0: (
    x: 0,
    y: 0
  ),
  1: (
    x: ($spacer-x * .25),
    y: ($spacer-y * .25)
  ),
  2: (
    x: ($spacer-x * .5),
    y: ($spacer-y * .5)
  ),
  3: (
    x: $spacer-x,
    y: $spacer-y
  ),
  4: (
    x: ($spacer-x * 1.5),
    y: ($spacer-y * 1.5)
  ),
  5: (
    x: ($spacer-x * 3),
    y: ($spacer-y * 3)
  )
) !default;

hier mehr lesen

https://v4-alpha.getbootstrap.com/utilities/spacing/#horizontal-centering

Answer 5

Zu dieser Klasse in der .css-Datei hinzufügen:

.row {
    margin-left: -20px;
    *zoom: 1;
    margin-top: 50px;
}

oder erstellen Sie eine neue Klasse und fügen Sie sie dem Element

.rowSpecificFormName td {
    margin-top: 50px;
}