Nah, inilah opsi lain yang telah saya gunakan selama beberapa waktu sekarang. Ini bekerja sangat baik untuk saya karena saya sangat membutuhkannya untuk memisahkan 2 cols secara visual. Dan itu juga responsif. Artinya, jika saya memiliki kolom di samping satu sama lain dalam ukuran layar sedang dan besar, maka saya akan menggunakan kelas col-md-border, yang akan menyembunyikan pemisah pada ukuran layar yang lebih kecil.
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;
}
}
Dalam scss Anda dapat menghasilkan semua kelas yang dibutuhkan mungkin dari ini:
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>
Bagaimana itu bekerja:
Kolom harus berada di dalam elemen di mana tidak ada kolom lain, jika tidak, penyeleksi mungkin tidak bekerja seperti yang diharapkan.
.col-md-border:not(:last-child)cocok dengan semua kecuali elemen terakhir sebelum .row close dan menambahkan batas kanan padanya.
.col-md-border + .col-md-bordermencocokkan div kedua dengan kelas yang sama jika keduanya bersebelahan dan menambahkan batas kiri dan margin negatif -1px. Margin negatif adalah mengapa tidak masalah lagi kolom mana yang memiliki tinggi lebih besar dan pemisahnya adalah 1px sama tingginya dengan kolom tertinggi.
Itu juga memiliki beberapa masalah ...
- Saat Anda mencoba untuk menjadi pintar / malas dan menggunakan
col-XX-Xkelas bersama dengan hidden-XX/ visible-XXkelas di dalam elemen baris yang sama.
- Ketika Anda memiliki banyak kolom dan membutuhkan piksel yang sempurna. Karena itu memindahkan n-1 kolom 1px ke kiri.
... Tapi di sisi lain itu responsif, bekerja sangat baik untuk html sederhana dan mudah untuk membuat kelas-kelas ini untuk semua ukuran layar bootstrap.