divisor vertical entre dos columnas en bootstrap

Respuestas:

97

Si su código se ve así:

<div class="row">
  <div class="span6">
  </div>
  <div class="span6">
  </div>
</div>

Entonces, ¿asumiría que está utilizando DIVS adicionales dentro del DIVS "span6" para mantener / diseñar su contenido? Entonces...

<div class="row">
  <div class="span6">
    <div class="mycontent-left">
    </div>
  </div>
  <div class="span6">
    <div class="mycontent-right">
    </div>
  </div>
</div>

Entonces, simplemente podría agregar algo de CSS a la clase "mycontent-left" para crear su divisor.

.mycontent-left {
  border-right: 1px dashed #333;
}
Billy Moat
fuente
1
el problema con lo anterior es que el borde se adhiere a mi contenido en el primer tramo. En el primer tramo tengo un formulario y el borde abraza su contenido. ¿Cómo puedo separarlo?
murtaza52
Simple: agregue algo de relleno a los DIVS de contenido izquierdo y derecho.
Billy Moat
10
El problema ocurriría si el contenido de la derecha fuera <span>más alto que el de la izquierda. En ese caso, la línea vertical será fea.
lvarayut
Si las columnas son de diferentes alturas, puede hacer que la línea corra completamente hacia abajo estableciendo min-height: 100%; height: 100%;el CSS para el contenedor divy los divcorreos electrónicos que contienen cada columna.
raul
@raul Creo que solo funciona si estás usando flexbox. Si está utilizando flotadores en los col-*divs, esto no funcionará.
Jacob Stamm
30 

.row.vertical-divider {
  overflow: hidden;
}
.row.vertical-divider > div[class^="col-"] {
  text-align: center;
  padding-bottom: 100px;
  margin-bottom: -100px;
  border-left: 3px solid #F2F7F9;
  border-right: 3px solid #F2F7F9;
}
.row.vertical-divider div[class^="col-"]:first-child {
  border-left: none;
}
.row.vertical-divider div[class^="col-"]:last-child {
  border-right: none;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="row vertical-divider" style="margin-top: 30px">
  <div class="col-xs-6">Hi there</div>
  <div class="col-xs-6">Hi world<br/>hi world</div>
</div>
Expandir fragmento

Santirisco
fuente
1
Use el selector '+' y no necesita la primera y la última clase secundaria:.row.vertical-divider div[class^="col-"] + div[class^="col-"] { text-align: center; padding-bottom: 100px; margin-bottom: -100px; border-left: 3px solid #0396D1; }
Vasyl
1
Esta solución es la mejor
Wai Yan Hein
21

En Bootstrap 4 existe la clase de utilidad border-rightque puede usar.

Entonces, por ejemplo, puede hacer:

<div class="row">
  <div class="col-6 border-right"></div>
  <div class="col-6"></div>
</div>
pgmank
fuente
14

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 ...

  1. Cuando intentas ser inteligente / vago y usas col-XX-Xclass junto con hidden-XX/ visible-XXclasses dentro del mismo elemento de fila.
  2. 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.

Artur Käpp
fuente
8

Para corregir el aspecto desagradable de un divisor demasiado corto cuando el contenido de una columna es más alto, agregue bordes a todas las columnas. Dé a todas las demás columnas un margen negativo para compensar las diferencias de posición.

Por ejemplo, mis clases de tres columnas:

.border-right {
    border-right: 1px solid #ddd;
}
.borders {
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    margin: -1px;
}
.border-left {
    border-left: 1px solid #ddd;
}

Y el HTML:

<div class="col-sm-4 border-right">First</div>
<div class="col-sm-4 borders">Second</div>
<div class="col-sm-4 border-left">Third</div>

Asegúrese de usar #ddd si desea el mismo color que los divisores horizontales de Bootstrap.

Becca
fuente
Me gusta esta solución, pero está diseñada para solo tres o más columnas. ¿Y si solo quieres dos? Su div ".borders" intermedio no estará allí para ajustar los márgenes.
Matthew Zackschewski
6

Si todavía está buscando la mejor solución en 2018, encontré la forma en que esto funciona perfectamente si tiene al menos un pseudo elemento gratuito (:: after o :: before).

Solo tiene que agregar una clase a su fila de esta manera: <div class="row vertical-divider ">

Y agregue esto a su CSS: 

.row.vertical-divider [class*='col-']:not(:last-child)::after {
  background: #e0e0e0;
  width: 1px;
  content: "";
  display:block;
  position: absolute;
  top:0;
  bottom: 0;
  right: 0;
  min-height: 70px;
}

Cualquier fila con esta clase ahora tendrá un divisor vertical entre todas las columnas que contiene ...

Puedes ver cómo funciona esto en este ejemplo.

Desarrollador de banano
fuente
1
Omitir - en [class * = 'col-'] (a [class * = 'col']) para compatibilidad de bootstrap 4 con la clase "col"
Trey Dibler
solo un comentario "La propiedad se ignora debido a la visualización. Con 'display: inline', las propiedades width, height, margin-top, margin-bottom y float no tienen efecto .css"
Shuja Ahmed
5

Si desea un divisor vertical entre 2 columnas, todo lo que necesita es agregar 

class="col-6 border-left"

a una de sus columnas div-s

PERO

En el mundo del diseño receptivo, es posible que deba hacerlo desaparecer a veces.

La solución está desapareciendo <hr>+ desapareciendo <div>+margin-left: -1px;

<div class="container">
  <div class="row">
    <div class="col-md-7">
      1 of 2
    </div>
    <div class="border-left d-sm-none d-md-block" style="width: 0px;"></div>
    <div class="col-md-5" style="margin-left: -1px;">
    <hr class="d-sm-block d-md-none">
      2 of 2
    </div>
  </div>
</div>

https://jsfiddle.net/8z1pag7s/

probado en Bootstrap 4.1

Yevgeniy Afanasyev
fuente
4

Lo he probado. Funciona bien.

.row.vdivide [class*='col-']:not(:last-child):after {
      background: #e0e0e0;
      width: 1px;
      content: "";
      display:block;
      position: absolute;
      top:0;
      bottom: 0;
      right: 0;
      min-height: 70px;
    }

    <div class="container">
      <div class="row vdivide">
        <div class="col-sm-3 text-center"><h1>One</h1></div>
        <div class="col-sm-3 text-center"><h1>Two</h1></div>
        <div class="col-sm-3 text-center"><h1>Three</h1></div>
        <div class="col-sm-3 text-center"><h1>Four</h1></div>
      </div>
    </div>
Chiranjit Ghosh
fuente
1
Funciona, perfectamente según sea necesario, también debería haber explicado lo que hiciste.
Atik M.
Absolutamente perfecto y totalmente receptivo, incluso cuando las columnas se apilan en pantallas más pequeñas, el borde desaparece, como desearía. ¡Una gran solución fácil, gracias! :)
rmcsharry
1
no funciona, el separador correcto todavía está allí, eche un vistazo aquí: jsfiddle.net/k4uavbtz
Yevgeniy Afanasyev
Funciona para más de 3 columnas. Cuando solo se utilizan dos columnas, el divisor sigue la altura de la columna de la izquierda. Por lo tanto, si la columna de la derecha es más larga, el borde no será lo suficientemente alto.
Matthew Zackschewski
4

Con Bootstrap 4 puedes usar bordes , evitando escribir otros CSS.

borde izquierdo

Y si desea espacio entre el contenido y el borde, puede usar relleno . (en este ejemplo, relleno a la izquierda 4px)

pl-4

Ejemplo: 

    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>

    <div class="row">
      <div class="offset-6 border-left pl-4">First</div>
      <div class="offset-6 border-left pl-4">Second</div>
    </div>
Expandir fragmento

WalterV
fuente
2

¡Debe abrir en la página completa para ver los bordes!

Se agregaron cláusulas de ancho de medios en el CSS para que no haya bordes desagradables en el lado amigable para dispositivos móviles. ¡Espero que esto ayude! Esto cambiará de tamaño a la longitud de la columna más larga. Probado en .col-md-4 y .col-md-6 y supongo que es compatible con el resto. Sin embargo, no hay garantías.

JSFiddle

.row {
  overflow: hidden;
}

.cols {
  padding-bottom: 100%;
  margin-bottom: -100%;
  overflow: hidden;
}

@media(min-width: 992px) {
  .col-md-4:not(:first-child), 
  .col-md-6:not(:first-child) {
    border-left: 1px solid black;
  }
  .col-md-4:not(:last-child),
  .col-md-6:not(:last-child) {
    border-right: 1px solid black;
    margin-right: -1px;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <h1>
    .col-md-6
  </h1>
  <hr>
  <div class="row text-center">
    <div class="col-md-6 cols">
      <p>Enter some text here</p>
    </div>
    <div class="col-md-6 cols">
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
    </div>
  </div>
  <hr>
  <h1>
    .col-md-4
  </h1>
  <div class="row text-center">
    <div class="col-md-4 cols">
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
    </div>
    <div class="col-md-4 cols">
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
    </div>
    <div class="cols col-md-4 cols">
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
      <p>Enter some more text here</p>
    </div>
  </div>
</div>
Expandir fragmento

Matthew Zackschewski
fuente
2

Suponiendo que tiene un espacio de columna, esta es una opción. Reequilibre las columnas según lo que necesite.

<div class="col-1">
    <div class="col-6 vhr">
    </div>
</div>

.vhr{
  border-right: 1px solid #333;
  height:100%;
}
Jacob Paine
fuente
0

Bueno, lo que hice fue quitar el canal entre los tramos respectivos y luego dibujar un borde izquierdo para el tramo izquierdo y un borde derecho para el tramo derecho de tal manera que sus bordes se superpusieran solo para dar una sola línea. De esta manera, la línea visible será solo una de las fronteras.

CSS 

.leftspan
{
padding-right:20px;
border-right: 1px solid #ccc;
}

.row-fluid .rightspan {
margin-left: -0.138297872340425%;
*margin-left: -0.13191489361702%;
padding-left:20px;
border-left: 1px solid #ccc;
}

.row-fluid .rightspan:first-child {
margin-left: -0.11063829787234%;
*margin-left: -0.104255319148938%;
}

HTML

  <div class="row-fluid" >
      <div class="span8 leftspan" >
      </div>

      <div class="span4 rightspan"  >
      </div>
 </div>

Prueba esto, funciona para mí

flexxxit
fuente
1
Eso es feo cuando los 2 divs no tienen la misma altura.
Alain Tiemblo
-2

Utilice esto, 100% garantizado: -

vr {
  margin-left: 20px;
  margin-right: 20px;
  height: 50px;
  border: 0;
  border-left: 1px solid #cccccc;
  display: inline-block;
  vertical-align: bottom;
}
mn128b
fuente