İşte bir süredir kullandığım başka bir seçenek. Benim için harika çalışıyor çünkü çoğunlukla görsel olarak ayrı 2 kola ihtiyacım var. Ve aynı zamanda duyarlı. Bu, orta ve büyük ekran boyutlarında yan yana sütunlarım varsa, o zaman col-md-borderayırıcıyı daha küçük ekran boyutlarında gizleyen sınıfı kullanacağım anlamına gelir .
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'de muhtemelen bundan tüm gerekli sınıfları oluşturabilirsiniz:
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>
Nasıl çalışır:
Sütunlar, başka hiçbir sütun bulunmayan bir öğenin içinde olmalıdır, aksi takdirde seçiciler beklendiği gibi çalışmayabilir.
.col-md-border:not(:last-child).row close öncesindeki son öğe dışındaki tüm öğelerle eşleşir ve buna sağ kenarlık ekler.
.col-md-border + .col-md-borderBu ikisi yan yana ise ikinci div ile aynı sınıfla eşleşir ve sol kenarlık ve -1px negatif kenar boşluğu ekler. Negatif kenar boşluğu, artık hangi sütunun daha yüksek yüksekliğe sahip olduğunun ve ayırıcının 1px en yüksek sütunla aynı yükseklikte olmasının nedenidir.
Bazı sorunları da var ...
- Akıllı / tembel olmaya çalıştığınızda ve
col-XX-Xsınıfı aynı satır öğesi içinde hidden-XX/ visible-XXsınıfları ile birlikte kullandığınızda .
- Çok fazla sütununuz olduğunda ve piksel mükemmel bir şeye ihtiyacınız olduğunda. N-1 sütun 1px sola hareket ettiğinden.
... Ancak diğer yandan duyarlı, basit html için harika çalışıyor ve bu sınıfları tüm önyükleme ekranı boyutları için oluşturmak çok kolay.