Estoy usando bootstrap para dibujar un pozo. En este pozo, creo dos span6 y me gustaría dibujar un divisor vertical entre estas dos columnas. ¿Cómo puedo lograr mi objetivo?A través de Bootstrap, ¿cómo puedo agregar un divisor vertical en un pozo?
dibujar el borde izquierdo en absoluto, pero la primera columna:
.well [class^="span"] + [class^="span"] {
margin-left: -1px; /* compensate border width */
border-left: 1px solid #e3e3e3;
}
Alternativamente, columnas CSS se pueden utilizar (prefijos requeridos):
.well.col {
columns: 2;
column-gap: 20px;
column-rule: 1px solid #e3e3e3;
}
Si nunca han utilizarlo antes, deberías consultar mi tutorial on CSS columns.
Siempre puede usar una etiqueta HTML <hr>.
Siempre y cuando solo implemente un diseño de fila única, es posible hacer que el tamaño del
podría ser posible, pero seguramente inválido. – Dementic
La respuesta seleccionada se rompe si sus elementos ocupan todo el ancho porque el borde agrega 1px de más. Para combatir esto, puede ajustar el margen para tener en cuenta el borde.
.line-right {
margin-right: -1px;
border-right: 1px solid black;
}
Si desea un borde más grande, ¡asegúrese de tenerlo en cuenta al margen!
@PavloMykhalov Lo probaría también, por alguna razón al cambiar el margen izquierdo no siempre funcionaba. Podría relacionarse con las clases de relleno de margen o margen agregar automáticamente –
Tiene razón. Debería comprobarlo dos veces. – Pavlo
Esto rompe el diseño para mí –
creo que lo rompe porque agregar un borde agrega una pequeña cantidad de ancho, si anteriormente tenía elementos ocupando todo el ancho de la página, incluso 1px lo empujaría demasiado y rebotaría algo –