it-swarm.com.de

Twitter Bootstrap - füge den oberen Abstand zwischen den Zeilen hinzu

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

434
itsme

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

Um dieses Problem zu lösen, erstellen Sie stattdessen eine neue Klasse "Top-Puffer", die den von Ihnen benötigten Standardabstand hinzufügt.

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

Und dann verwenden Sie es für die Zeile divs, wo Sie einen oberen Rand benötigen.

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

Ok, um Sie 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, <div class="row top7"></div>

um besser reagieren zu können, können Sie anstelle von margin-top:7%5px hinzufügen. Beispiel: D

164
itsme

Bootstrap 3

Wenn Sie Zeilen in Bootstrap trennen müssen, können Sie einfach .form-group verwenden. Dies fügt dem Rand der Zeile einen Rand von 15px hinzu.

In Ihrem Fall können Sie diese Klasse zum vorherigen .row-Element 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 eingebaute 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 und rechts. Die Zahl definiert die Raumgröße.

92
Buksy

Für Bootstrap 4 sollte Abstand verwendet werden

shorthand Utility-Klassen

im folgenden Format:

{property} {sides} - {size}

Wobei property eines von:

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

Wo Seiten ist einer von:

  • t - für Klassen, die margin-top oder padding-top setzen
  • b - für Klassen, die den Rand oder den Abstand festlegen
  • l - für Klassen, die den linken Rand oder den linken Abstand festlegen
  • r - für Klassen, die den Rand nach rechts oder den Abstand nach rechts festlegen
  • 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 einen Rand oder einen Abstand auf allen 4 Seiten des Elements festlegen

Wobei Größe eines von:

Sie sollten also eine der folgenden Aktionen ausführen:

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

Lesen Sie die --- (docs für weitere Erklärungen. Probieren Sie Live-Beispiele über hier .

69
Rajkaran Mishra

In einigen Fällen kann die Randspitze zu Designproblemen führen:

http://www.w3.org/TR/CSS2/box.html#collapsing-margins

Ich empfehle daher, "Margin-Bottom-Klassen" anstelle von "Margin-Top-Klassen" zu erstellen und auf den vorherigen Artikel anzuwenden.

Wenn Sie mit Bootstrap LESS Bootstrap-Dateien importieren, versuchen Sie, die unteren Klassen mit proportionalen Bootstrap-Designbereichen 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);}  
45
kurroman

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>
33
srmilon

Ich verwende diese Klassen, um den oberen Rand zu verä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 brauche, um 2em Abstand vom Element oben zu haben, verwende ich es so:

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

Wenn Sie Pixel bevorzugen, ändern Sie das Em in px, um es nach Ihren Wünschen zu gestalten.

27
Hexodus

Sie können die folgende Klasse für Bootstrap 4 verwenden:

mt-0mt-1mt-2mt-3mt-4...

Ref: https://v4-alpha.getbootstrap.com/utilities/spacing/

9
Smilefounder

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

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

Einheiten sind von 1 bis 5: in den variables.scss Wenn Sie also mt-1 einstellen, wird der Rand oben auf .25rem gesetzt. 

$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

3
Sherif SALEH

Fügen Sie dieser Klasse in der .css-Datei 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;
}
2
Nielsen Ramon

In Bootstrap 4 alpha + können Sie dies verwenden 

class margin-bottom-5

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

1
Al Quarashi

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

 #myCustomDivID .row {
     margin-top:20px;
 }
1
fredyfx
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>
1
shiva krishna

Bootstrap3

CSS (nur Rinne, ohne Ränder):

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

CSS (gleiche Margen um 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 LESS 15px könnte eine Variable von bootstrap sein)

1
Isometriq

sie können diesen Code hinzufügen: 

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

Wenn Sie BootStrap 3.3.7 verwenden, können Sie die Open Source Library Bootstrap-Spacer über NPM verwenden

npm install bootstrap-spacer

oder Sie können die Github-Seite besuchen:

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

Hier ein Beispiel, wie dies funktioniert, um Zeilen mit 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 den 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 der Klassen .row-spacer & .row-col-spacer zusammenfassen:

<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>
0
Chigozie Orunta

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

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

0
TheAivis
<div class="row row-padding">

einfacher Code