Bueno, aquí hay otra opción que he estado usando durante algún tiempo. Funciona muy bien para mí, ya que principalmente lo necesito para separar visualmente 2 columnas. Y también responde. Lo que significa que si tengo columnas una al lado de la otra en tamaños de pantalla medianos y grandes, entonces usaría la clasecol-md-border , que ocultaría el separador en tamaños de pantalla más pequeños.
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;
}
}
En scss puede generar todas las clases necesarias probablemente a partir de esto:
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>
Cómo funciona:
Las columnas deben estar dentro de un elemento donde no hay otras columnas, de lo contrario, los selectores podrían no funcionar como se esperaba.
.col-md-border:not(:last-child)coincide con todos menos el último elemento antes de .row close y le agrega el borde derecho.
.col-md-border + .col-md-bordercoincide con el segundo div con la misma clase si estos dos están uno al lado del otro y agrega un borde izquierdo y un margen negativo de -1px. El margen negativo es la razón por la que ya no importa qué columna tiene mayor altura y el separador será 1px la misma altura que la columna más alta.
También tiene algunos problemas ...
- Cuando intentas ser inteligente / vago y usas
col-XX-Xclass junto con hidden-XX/ visible-XXclasses dentro del mismo elemento de fila.
- Cuando tienes muchas columnas y necesitas un píxel perfecto. Dado que mueve n-1 columna 1px a la izquierda.
... Pero, por otro lado, responde, funciona muy bien para html simple y es fácil crear estas clases para todos los tamaños de pantalla de arranque.