Bootstrap: Wie fügt man vertikalen Offset in Spalten hinzu?

Bootstrap bietet eine Klasse col-sm-offset-* zum Hinzufügen von Leerzeichen zwischen Spalten. Es funktioniert gut auf Laptop-Bildschirm, aber wenn wir die Bildschirmauflösung auf mobile ändern, zeigt es Spalten ohne Zwischenraum untereinander angeordnet.Bootstrap: Wie fügt man vertikalen Offset in Spalten hinzu?

Gibt es eine Klasse in der Bootstrap-Bibliothek, mit der wir das erwartete Ergebnis erzielen können?

Refer fiddle

Stromausgang,

Erwartetes Ergebnis,

Quelle

2016-05-11 Rishi Vedpathak

Derzeit ist kein vertikaler Offset als Standard in Bootstrap 3 verfügbar. Fügt einen vertikalen Offset oben und unten zu Bootstrap 3 hinzu, der innerhalb der Spalten –

für Ihren Code verwendet werden soll. add css ".col-sm-offset-1 { margin-top: 1em;} "[jsfiddle] (https://jsfiddle.net/Ramachandra/q22xnmf9/1/) –

Sie müssen die Eigenschaft margin-top verwenden, da keine andere Option zum Festlegen des vertikalen Versatzes vorhanden ist. –

Sie können diesem bestimmten div zusätzliche Klasse (beliebiger Name) hinzufügen und gegebenes css dazu verwenden.

.custom{ 
 
    margin-bottom:10px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
<div class="row"> 
 
    <div class="col-sm-2 col-sm-offset-1 custom" style="background-color:lavender;">col-1</div> 
 
    <div class="col-sm-2 col-sm-offset-1 custom" style="background-color:lavenderblush;">col-2</div> 
 
    <div class="col-sm-2 col-sm-offset-1 custom" style="background-color:lavender;">col-3</div> 
 
    <div class="col-sm-2 col-sm-offset-1 custom" style="background-color:lavenderblush;">col-4</div> 
 
</div> 
 
</div>

Quelle

2016-05-11 10:28:04

Dies ist das Beste, was ich tun kann, da keine Klasse verfügbar ist, um den vertikalen Offset einzustellen. –

Ja ... Danke ..! –

versuchen, wie diese

.col-sm-offset-1{ 
 
    margin-top: 1em; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
<div class="row"> 
 
    <div class="col-sm-2 col-sm-offset-1" style="background-color:lavender;">col-1</div> 
 
    <div class="col-sm-2 col-sm-offset-1" style="background-color:lavenderblush;">col-2</div> 
 
    <div class="col-sm-2 col-sm-offset-1" style="background-color:lavender;">col-3</div> 
 
    <div class="col-sm-2 col-sm-offset-1" style="background-color:lavenderblush;">col-4</div> 
 
</div> 
 
</div>

Quelle

2016-05-11 09:28:00

Danke, aber das wird unnötigen Rand oben für die erste Zeile hinzufügen. Und in einer großen Bildschirmauflösung. Auch ich habe versucht mit - https://gist.github.com/erobert17/9139147 Ich denke, ich muss dann Medienabfrage verwenden. –

Ein wenig spät, aber vor einer Weile kam ich auf diese:

https://gist.github.com/erobert17/9139147

die ein sass Stile für vertikalen Versatz hat:

@for $i from 0 through 12 { 
    .vert-offset-top-#{$i} { 
    margin-top: #{$i}em; 
    } 

    .vert-offset-bottom-#{$i} { 
    margin-bottom: #{$i}em; 
    } 
}

Es hat ziemlich gut funktioniert für mich :)

Quelle

2016-12-22 13:28:58 surgiie

Bootstrap: Wie fügt man vertikalen Offset in Spalten hinzu?

Antwort

Verwandte Themen