Bene, ecco un'altra opzione che sto usando da un po 'di tempo. Funziona benissimo per me dato che per lo più ho bisogno di separare visivamente 2 colonne. Ed è anche reattivo. Ciò significa che se ho colonne una accanto all'altra in dimensioni dello schermo medie e grandi, allora userei la classecol-md-border , che nasconderebbe il separatore su schermi di dimensioni inferiori.
css:
@media (min-width: 992px) {
.col-md-border:not(:last-child) {
border-right: 1px solid #d7d7d7;
}
.col-md-border + .col-md-border {
border-left: 1px solid #d7d7d7;
margin-left: -1px;
}
}
In scss puoi generare tutte le classi necessarie probabilmente da questo:
scss:
@media(min-width: $screen-md-min) {
.col-md-border {
&:not(:last-child) {
border-right: 1px solid #d7d7d7;
}
& + .col-md-border {
border-left: 1px solid #d7d7d7;
margin-left: -1px;
}
}
}
HTML:
<div class="row">
<div class="col-md-6 col-md-border"></div>
<div class="col-md-6 col-md-border"></div>
</div>
Come funziona:
I cols devono essere all'interno di un elemento dove non ci sono altri cols altrimenti i selettori potrebbero non funzionare come previsto.
.col-md-border:not(:last-child)corrisponde a tutti tranne l' ultimo elemento prima di .row close e aggiunge il bordo destro ad esso.
.col-md-border + .col-md-bordercorrisponde al secondo div con la stessa classe se questi due sono uno accanto all'altro e aggiunge il bordo sinistro e -1px margine negativo. Il margine negativo è il motivo per cui non importa più quale colonna ha un'altezza maggiore e il separatore sarà 1px della stessa altezza della colonna più alta.
Ha anche alcuni problemi ...
- Quando cerchi di essere intelligente / pigro e usi
col-XX-Xclass insieme a hidden-XX/ visible-XXclasses all'interno dello stesso elemento riga.
- Quando hai molte colonne e hai bisogno di un pixel perfetto. Poiché si sposta n-1 colonna 1px a sinistra.
... Ma d'altra parte è reattivo, funziona alla grande per html semplice ed è facile creare queste classi per tutte le dimensioni dello schermo di bootstrap.