Ну ось ще один варіант, який я використовую вже деякий час. Це чудово працює для мене, оскільки мені в основному це потрібно, щоб візуально відокремити 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-Xклас разом з hidden-XX/ visible-XXкласами всередині одного елемента рядка.
- Коли у вас багато стовпців і вам потрібна ідеальна піксельна штука. Оскільки він переміщує стовпчик n-1 на 1 пікс вліво.
... Але, з іншого боку, він чуйний, чудово працює для простого html і легко створює ці класи для всіх розмірів екрану завантажувального екрану.