さて、これは私がしばらくの間使用している別のオプションです。私は主に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は、他のcolがない要素内にある必要があります。そうでない場合、セレクターが期待どおりに機能しない可能性があります。
.col-md-border:not(:last-child).row closeの前の最後の要素を除くすべての要素に一致し、それに右の境界線を追加します。
.col-md-border + .col-md-borderこれら2つが互いに隣接している場合、同じクラスの2番目のdivと一致し、左の境界線と-1pxの負のマージンを追加します。負のマージンは、どの列の高さが高くても問題がなくなり、セパレータが最も高い列と同じ高さの1pxになる理由です。
また、いくつかの問題があります...
- 賢く/怠惰になり、同じ行要素内
col-XX-Xでhidden-XX/visible-XXクラスと一緒にクラスを使用しようとする場合。
- 列がたくさんあり、ピクセルに最適なものが必要な場合。n-1列を1px左に移動するため。
...しかし一方で、応答性が高く、単純なhtmlに最適であり、すべてのブートストラップ画面サイズに対してこれらのクラスを簡単に作成できます。