Nun, hier ist eine weitere Option, die ich seit einiger Zeit verwende. Es funktioniert großartig für mich, da ich es meistens brauche, um 2 Spalten visuell zu trennen. Und es reagiert auch. Das heißt, wenn ich Spalten in mittleren und großen Bildschirmgrößen nebeneinander habe, würde ich die Klasse verwenden col-md-border, die das Trennzeichen bei kleineren Bildschirmgrößen verbirgt.
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;
}
}
In scss können Sie wahrscheinlich alle benötigten Klassen daraus generieren:
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>
Wie es funktioniert:
Die Spalten müssen sich in einem Element befinden, in dem keine anderen Spalten vorhanden sind. Andernfalls funktionieren die Selektoren möglicherweise nicht wie erwartet.
.col-md-border:not(:last-child)Entspricht allen bis auf das letzte Element vor .row close und fügt einen rechten Rand hinzu.
.col-md-border + .col-md-borderStimmt mit dem zweiten Div mit derselben Klasse überein, wenn diese beiden nebeneinander liegen, und fügt den linken Rand und den negativen Rand -1px hinzu. Ein negativer Rand ist der Grund, warum es nicht mehr wichtig ist, welche Spalte eine größere Höhe hat und das Trennzeichen 1px der Höhe der höchsten Spalte entspricht.
Es hat auch einige Probleme ...
- Wenn Sie versuchen, klug / faul zu sein und
col-XX-Xclass zusammen mit hidden-XX/ visible-XXclasses innerhalb desselben Zeilenelements zu verwenden.
- Wenn Sie viele Spalten haben und eine pixelgenaue Sache benötigen. Da es n-1 Spalte 1px nach links bewegt.
... Aber auf der anderen Seite reagiert es, funktioniert hervorragend für einfaches HTML und es ist einfach, diese Klassen für alle Bootstrap-Bildschirmgrößen zu erstellen.