Bootstrap: come aggiungere offset verticale nelle colonne?

Bootstrap fornisce una classe col-sm-offset-* per aggiungere spazi tra le colonne. Funziona bene sullo schermo del laptop ma quando cambiamo la risoluzione dello schermo su mobile mostra colonne disposte una sotto l'altra senza spazio.Bootstrap: come aggiungere offset verticale nelle colonne?

Esiste una classe nella lib bootstrap che consente di ottenere il risultato previsto.

Refer fiddle

Uscita in corrente, risultato

Previsto,

fonte

2016-05-11 Rishi Vedpathak

Attualmente nessun offset verticale è disponibile come standard in Bootstrap 3. Aggiunge un offset verticale superiore e inferiore a Bootstrap 3 da utilizzare all'interno delle colonne –

per il codice di aggiunta css ".col-sm-offset-1 { margin-top: 1em;} "[jsfiddle] (https://jsfiddle.net/Ramachandra/q22xnmf9/1/) –

È necessario utilizzare la proprietà margin-top, non ci sono altre opzioni per impostare l'offset verticale. –

È possibile aggiungere ulteriore classe (qualsiasi nome) a quel particolare div e utilizzare css dato ad esso.

.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>

fonte

2016-05-11 10:28:04

Questo è il meglio che posso fare in quanto non esiste una classe disponibile per impostare l'offset verticale. –

Sì ... Grazie ..! –

provare come questo

.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>

fonte

2016-05-11 09:28:00

Grazie, ma questo aggiungerà inutile margine superiore per la prima riga. E anche nella risoluzione del grande schermo. Anche io ho provato a usare - https://gist.github.com/erobert17/9139147 Suppongo di dover usare la query multimediale quindi. –

Un po 'tardi, ma qualche tempo fa mi sono imbattuto in questo:

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

che ha uno stili Sass per offset verticali:

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

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

Ha funzionato abbastanza bene per me :)

fonte

2016-12-22 13:28:58 surgiie

Bootstrap: come aggiungere offset verticale nelle colonne?

risposta

Problemi correlati