Что ж, вот еще один вариант, который я использую уже некоторое время. Он отлично работает для меня, поскольку мне больше всего нужно, чтобы он визуально разделял 2 столбца. И это тоже отзывчиво. Это означает, что если у меня есть столбцы рядом друг с другом на средних и больших экранах, я бы использовал класс col-md-border, который скрывал бы разделитель на экранах меньшего размера.
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;
}
}
В scss вы можете сгенерировать все необходимые классы, вероятно, из этого:
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>
Как это работает:
Столбцы должны находиться внутри элемента, где нет других столбцов, иначе селекторы могут работать не так, как ожидалось.
.col-md-border:not(:last-child)соответствует всем элементам, кроме последнего перед .row close, и добавляет к нему правую границу.
.col-md-border + .col-md-borderсоответствует второму div с тем же классом, если эти два элемента находятся рядом друг с другом, и добавляет левую границу и отрицательное поле -1px. Отрицательное поле - это то, почему больше не имеет значения, какой столбец имеет большую высоту, а разделитель будет на 1 пиксель той же высоты, что и самый высокий столбец.
Тут тоже есть проблемы ...
- Когда вы пытаетесь быть умным / ленивым и используете
col-XX-Xclass вместе с hidden-XX/ visible-XXclasses внутри одного элемента строки.
- Когда у вас много столбцов и нужен идеальный пиксель. Поскольку он перемещает n-1 столбец на 1 пиксель влево.
... Но, с другой стороны, он отзывчивый, отлично работает для простого html и легко создавать эти классы для всех размеров экрана начальной загрузки.