Đây là một tùy chọn khác mà tôi đã sử dụng một thời gian. Nó hoạt động tuyệt vời đối với tôi vì tôi chủ yếu cần nó để tách 2 cols một cách trực quan. Và nó cũng đáp ứng. Điều đó có nghĩa là nếu tôi có các cột cạnh nhau ở kích thước màn hình vừa và lớn, thì tôi sẽ sử dụng lớp col-md-border, lớp này sẽ ẩn dấu phân cách trên các kích thước màn hình nhỏ hơn.
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;
}
}
Trong scss, bạn có thể tạo tất cả các lớp cần thiết có thể từ cái này:
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>
Làm thế nào nó hoạt động:
Cols phải nằm bên trong một phần tử mà không có cols khác, nếu không các bộ chọn có thể không hoạt động như mong đợi.
.col-md-border:not(:last-child)khớp với tất cả trừ phần tử cuối cùng trước .row close và thêm đường viền bên phải vào nó.
.col-md-border + .col-md-borderkhớp với div thứ hai có cùng lớp nếu hai div này ở cạnh nhau và thêm đường viền bên trái và lề âm -1px. Lề âm là lý do tại sao không còn quan trọng nữa cột nào có chiều cao lớn hơn và dấu phân tách sẽ có cùng chiều cao với cột cao nhất là 1px.
Nó cũng có một số vấn đề ...
- Khi bạn cố tỏ ra thông minh / lười biếng và sử dụng
col-XX-Xlớp cùng với hidden-XX/ visible-XXcác lớp bên trong cùng một phần tử hàng.
- Khi bạn có nhiều cột và cần một thứ hoàn hảo pixel. Vì nó di chuyển n-1 cột 1px sang trái.
... Nhưng mặt khác, nó đáp ứng, hoạt động tốt với html đơn giản và thật dễ dàng để tạo các lớp này cho tất cả các kích thước màn hình bootstrap.