Twitter Bootstrap - Fügen Sie zwischen den Zeilen Platz hinzu

483

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

da ich bin
quelle

Antworten:

801

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"> ...
Acyra
quelle
45
Das Bearbeiten der nativen Zeile ist für ein Framework falsch, und die neue Klasse sollte nur die Zeilenklasse ergänzen. Dies ist ein subtiler Unterschied, aber in Twitter Bootstrap hat die Zeile eine bestimmte Seitenlayoutrolle. Wie auch immer, ich versuche nur zu helfen, meine Lösung ist eine funktionierende für das Problem.
Acyra
11
Auf keinen Fall sind diese Antworten meiner Meinung nach etwas anders. Dieser ist benutzerfreundlicher, da er den "Namen Ihres Klassenstils, damit Ihr HTML-Code leichter lesbar ist" umfasst und Sie den Rand oben im HTML-Code anstelle von rowSpecificForName lesen können. Diese Antwort entspricht eher den Twitter-Bootstrap-Mustern.
Dean Hiller
2
Sie werden Bootstrap 4 bestimmte vertikale Abstandsklassen hinzufügen: github.com/twbs/bootstrap/issues/4286
icc97
2
Alles, was ich aus diesen Kommentaren gelernt habe, ist, dass Entwickler sehr eigensinnig sind und einige 2 + 3 = 5 und andere 3 + 2 = 5 bevorzugen. Weiter ...
Fabio S.
3
@ FabioS. Was gelernt werden sollte ist, dass für ein Framework wie Bootstrap das Bearbeiten des nativen Codes oder das Überschreiben eine schlechte Idee ist. Die Szenarien sind endlos, aber hier sind einige Beispiele. a.) Überschreiben - Wenn Sie die .row-Klasse überschreiben, müssen Sie jetzt Ihr Projekt durchgehen und Zeilen, die nicht den Rand erhalten sollen, eine zusätzliche Klasse hinzufügen. b.) Native Code bearbeiten - Sie erben ein Projekt bei der Arbeit und möchten auf bootstrap4 aufsteigen; HOPPLA! Nichts sieht richtig aus!? Jetzt müssen Sie die Bootstrap 3-Datei durchgehen, um herauszufinden, was der vorherige Entwickler geändert hat.
Peroija
176

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.

da ich bin
quelle
13
Ich bin der Meinung, dass diese Lösung viel eleganter ist als die akzeptierte Lösung.
Rdiaz82
72
Es ist das Gleiche.
Alexander
@alexander aber generischer.
Ejaz
6
Wie .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.
Alexander
2
Der klassische 17px obere Rand; Sehr hilfreich.
Adripanico
129

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.

Buksy
quelle
Wurde die Formgruppe aus BS4 entfernt?
Z. Khullah
3
Nein, form-groupist 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.
Buksy
Wurden in Bootstrap V 4 mehrere Änderungen daran vorgenommen? Ich bin jetzt auf einer Version von 4 und mt-3funktioniert nicht so gebrauchtform-group
Nick Schwaderer
Es sollte funktionieren . Überprüfen Sie , ob das mit Ihrem Projekt verknüpfte Bootstrap-CSS die Klassendefinition ".mt-3" enthält.
Buksy
82

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 .

Rajkaran Mishra
quelle
3
Dies sollte jetzt mit der Veröffentlichung von Bootstrap 4 die akzeptierte Antwort sein. Mit diesen integrierten Klassen müssen keine neuen erstellt werden.
Matt K
45

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);}  
kurroman
quelle
33

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>
srmilon
quelle
27

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.

Hexodus
quelle
6
Gute Idee, aber ich abstrahiere die Zahlen, da sie zu spezifisch sind. Wenn Sie sich an Abstraktionen wie s, m, l, xl, xxl usw. halten, können Sie die Größe über CSS ändern, ohne die Namen in Vorlagen ändern zu müssen.
Mike Purcell
1
@ MikePurcell Gute Gedanken und es könnte die richtige Lösung für Sie sein. Ich bevorzuge jedoch eine genauere Methode zum Definieren von Rändern. Die Verwendung von em anstelle von px gibt mir eine lockere Möglichkeit, dies zu erreichen, ohne zu spezifisch zu werden.
Hexodus
3
Was ist der Vorteil von <div class="row margin-top-20">über <div class"row" style="margin-top: 2.0em">?
icc97
@ icc97 Grundsätzlich unabhängig von Bedenken, aber hier können Sie andere Meinungen sehen: stackoverflow.com/a/2612494/1683224 .
Wiley Marques
@WileyMarques Das gilt für eine Klasse mit dem Namen "top-buffer" (wie in der akzeptierten Antwort), ist aber für eine Klasse mit dem Namen margin-top-20 nicht sinnvoll. Es sei denn, Sie sind froh, dass Margin-Top-20 tatsächlich etwas anderes als 2 Polster hinzufügt, was nur verwirrend wäre.
Thelem
4

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

Sherif SALEH
quelle
3

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;
}
Nielsen Ramon
quelle
7
uhmmmmm ich mag es nicht, das CSS zu berühren, was ist, wenn ich Zeilen ohne Rand auf anderen Seiten brauche?
Es ist der
Sie könnten eine neue Klasse machen .rowSpecificForm
Nielsen Ramon
2
In Twitter Bootstrap gibt es jedoch keine definierte CSS-Klasse für nur "margin-top".
Nielsen Ramon
seltsam, dass sie nicht wenige Klassenabstände vertikal festgelegt haben, ich muss sie hinzufügen, es gibt keine andere Lösung: /, danke Nielsen
itsme
8
Denken Sie an CSS-Kaskaden, damit Sie bootstrap.css nie bearbeiten müssen.
ONOZ
1

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

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

In Bootstrap 4 alpha + können Sie dies verwenden

class margin-bottom-5

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

Al Quarashi
quelle
1
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>
Shiva Krishna
quelle
Bitte fügen Sie Ihrer Antwort Erklärungen hinzu. Antworten ohne Erklärungen sind nutzlos.
ADreNaLiNe-DJ
1

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)

Isometriq
quelle
1
<div class="row row-padding">

einfacher Code

Harshvardhan Singh Baghel
quelle
1
Mit Bootstrap - 4 können Sie diese Klasse hinzufügen, um den Abstand zwischen den Zeilen zu
bestimmen
0

Sie können diesen Code hinzufügen:

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

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>
Chigozie Orunta
quelle
1
Ich würde davon abraten, eine Abhängigkeit für 40 Zeilen CSS hinzuzufügen
Andrew Diamond
-3

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

<p>&nbsp;</p>
Asiniy
quelle