Oto kolejna opcja, której używam od jakiegoś czasu. Działa świetnie dla mnie, ponieważ najbardziej potrzebuję go wizualnie oddzielić 2 kolumny. Jest też responsywny. Co oznacza, że jeśli mam kolumny obok siebie na średnich i dużych rozmiarach ekranu, to użyłbym klasy col-md-border, która ukryłaby separator na mniejszych rozmiarach ekranu.
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;
}
}
W scss możesz wygenerować wszystkie potrzebne klasy prawdopodobnie z tego:
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>
Jak to działa:
Kolumny muszą znajdować się wewnątrz elementu, w którym nie ma innych kolumn, w przeciwnym razie selektory mogą nie działać zgodnie z oczekiwaniami.
.col-md-border:not(:last-child)dopasowuje wszystkie elementy oprócz ostatniego przed zamknięciem .row i dodaje do niego prawą krawędź.
.col-md-border + .col-md-borderdopasowuje drugi element div z tą samą klasą, jeśli te dwa elementy są obok siebie, i dodaje lewe obramowanie i ujemny margines -1px. Ujemny margines sprawia, że nie ma już znaczenia, która kolumna ma większą wysokość, a separator będzie miał 1 piksel tej samej wysokości co najwyższa kolumna.
Ma też pewne problemy ...
- Kiedy starasz się być sprytny / leniwy i używać
col-XX-Xclass razem z hidden-XX/ visible-XXclasses wewnątrz tego samego elementu wiersza.
- Kiedy masz dużo kolumn i potrzebujesz idealnej rzeczy w pikselach. Ponieważ przesuwa n-1 kolumnę o 1 piksel w lewo.
... Ale z drugiej strony jest responsywny, działa świetnie dla prostego HTML i łatwo jest stworzyć te klasy dla wszystkich rozmiarów ekranu bootstrap.