Wie füge ich class="row"Elementen mithilfe des Twitter-Bootstrap-Frameworks einen Rand nach oben hinzu ?

Das Bearbeiten oder Überschreiben der Zeile im Twitter-Bootstrap ist eine schlechte Idee, da dies ein zentraler Bestandteil des Seitengerüsts ist und Sie Zeilen ohne oberen Rand benötigen.

Um dies zu lösen, erstellen Sie stattdessen eine neue Klasse "Top-Buffer", die den von Ihnen benötigten Standardrand hinzufügt.

.top-buffer { margin-top:20px; }

Verwenden Sie es dann für die Zeilendivisionen, für die Sie einen oberen Rand benötigen.

<div class="row top-buffer"> ...

Ok, nur um dich wissen zu lassen, was dann passiert ist, habe ich einige neue Klassen verwendet, wie Acyra oben sagt:

.top5 { margin-top:5px; }
.top7 { margin-top:7px; }
.top10 { margin-top:10px; }
.top15 { margin-top:15px; }
.top17 { margin-top:17px; }
.top30 { margin-top:30px; }

wann immer ich will, tue ich <div class="row top7"></div>

Für eine bessere Reaktionsfähigkeit können Sie margin-top:7%anstelle von 5pxbeispielsweise hinzufügen : D.

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 .rowElement hinzufügen, um den oberen Rand zu erhalten

<div class="row form-group">

/* From bootstrap.css */
.form-group {
        margin-bottom: 15px;
}

Bootstrap 4

Sie können integrierte Abstandsklassen verwenden

<div class="row mt-3"></div>

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.

Für Bootstrap 4 sollte der Abstand mit verwendet werden

Kurzform Utility-Klassen

im folgenden Format:

{Eigenschaft} {Seiten} - {Größe}

Wo Eigentum ist eines von:

• m - für Klassen, die den Rand festlegen
• p - für Klassen, die das Auffüllen festlegen

Wo Seiten ist eine von:

• t - für Klassen, die Rand oben oder Polster oben setzen
• b - für Klassen, die den unteren Rand oder den unteren Rand festlegen
• l - für Klassen, die den Rand links oder den Abstand links setzen
• r - für Klassen, die den Rand rechts oder den Abstand rechts setzen
• x - für Klassen, die sowohl * -left als auch * -right setzen
• y - für Klassen, die sowohl * -top als auch * -bottom setzen
• leer - für Klassen, die auf allen 4 Seiten des Elements einen Rand oder eine Auffüllung festlegen

Wo Größe ist eine von:

• 0 - für Klassen, die den Rand oder die Auffüllung beseitigen, indem sie auf 0 gesetzt werden
• 1 - (standardmäßig) für Klassen, die den Rand oder die Auffüllung auf $ spacer * .25 setzen
• 2 - (standardmäßig) für Klassen, die den Rand oder die Auffüllung auf $ spacer * .5 setzen
• 3 - (standardmäßig) für Klassen, die den Rand oder die Auffüllung auf $ spacer setzen
• 4 - (standardmäßig) für Klassen, die den Rand oder die Auffüllung auf $ spacer * 1.5 setzen
• 5 - (standardmäßig) für Klassen, die den Rand oder die Auffüllung auf $ spacer * 3 setzen
• auto - für Klassen, die den Rand auf auto setzen

Sie sollten also Folgendes tun:

<div class="row mt-1">
<div class="row mt-2">
          ...
<div class="row mt-5">

Lesen Sie die Dokumente für weitere Erklärungen. Probieren Sie hier Live-Beispiele aus .

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:

.margin-bottom-xs {margin-bottom: ceil(@line-height-computed / 4);}  
.margin-bottom-sm {margin-bottom: ceil(@line-height-computed / 2);} 
.margin-bottom-md {margin-bottom: @line-height-computed;}
.margin-bottom-lg {margin-bottom: ceil(@line-height-computed * 2);}  

Ich habe diese Klassen 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>

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 ein Element mit einem Abstand von 2em zum obigen Element benötige, verwende ich es folgendermaßen:

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

Wenn Sie Pixel bevorzugen, ändern Sie das em in px, damit es Ihren Wünschen entspricht.

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/

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

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

Einheiten sind von 1bis 5: in der Variablen.scss, was bedeutet, wenn Sie mt-1 setzen, gibt es .25rem Rand oben.

$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;

Lesen Sie hier mehr

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

Fügen Sie dieser Klasse in der CSS-Datei Folgendes hinzu:

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

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

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

Wenn Sie nur auf einer Seite ändern möchten, fügen Sie die folgende Stilregel hinzu:

 #myCustomDivID .row {
     margin-top:20px;
 }

In Bootstrap 4 alpha + können Sie dies verwenden

class margin-bottom-5

Die Klassen werden im folgenden Format benannt: {property}-{sides}-{size}

just take a new class beside every row and apply css of margin-top: 20px;
here is the code below
<style>
  .small-top
   {
     margin-top: 25px;  
   }
</style>    
<div class="row small-top">
   <div class="col-md-12">
   </div>
 </div>

Bootstrap3

CSS (nur Dachrinne, ohne Ränder):

.row.row-gutter {
  margin-bottom: -15px;
  overflow: hidden;
}
.row.row-gutter > *[class^="col"] {
  margin-bottom: 15px;
}

CSS (gleiche Ränder, 15px / 2):

.row.row-margins {
  padding-top: 7px; /* or margin-top: 7px; */
  padding-bottom: 7px; /* or margin-bottom: 7px; */
}
.row.row-margins > *[class^="col"] {
  margin-top: 8px;
  margin-bottom: 8px;
}

Verwendungszweck:

<div class="row row-gutter">
    <div class="col col-sm-9">first</div>
    <div class="col col-sm-3">second</div>
    <div class="col col-sm-12">third</div>
</div>

(mit SASS oder WENIGER könnte 15px eine Variable von Bootstrap sein)

<div class="row row-padding">

einfacher Code

Sie können diesen Code hinzufügen:

[class*="col-"] {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

Verwenden Sie diesen bs3-upgradeHelfer einfach für Abstände und Textausrichtung ...

https://github.com/studija/bs3-upgrade

Wenn Sie BootStrap 3.3.7 verwenden, können Sie den Bootstrap-Spacer der Open Source-Bibliothek über NPM verwenden

npm install bootstrap-spacer

oder Sie können die Github-Seite besuchen:

https://github.com/chigozieorunta/bootstrap-spacer

Hier ist ein Beispiel, wie dies funktioniert, um Zeilen mithilfe der .row-spacer-Klasse zu platzieren:

<div class="row row-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

<div class="row row-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

Wenn Sie Leerzeichen zwischen Spalten benötigen, können Sie auch die Klasse .row-col-spacer hinzufügen:

<div class="row row-col-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

Sie können auch verschiedene Klassen .row-spacer und .row-col-spacer miteinander kombinieren:

<div class="row row-spacer row-col-spacer">
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
    <div class="col-md-4">
    </div>
</div>

Mein Trick. Nicht so sauber, funktioniert aber gut für mich

<p>&nbsp;</p>