html - filas - rejillas bootstrap 4

divisor vertical entre dos columnas en bootstrap

Question

Estoy usando twitter bootstrap, y tengo una fila que tiene dos columnas (span6). ¿Cómo creo un divisor vertical entre ambos tramos?

Gracias, Murtaza

Answer 1

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 móvil de las cosas. ¡Espero que esto ayude! Esto se redimensionará a la longitud de la columna más larga. Probado en .col-md-4 y .col-md-6 y mi suposición es 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>

Answer 2

Bueno, aquí hay otra opción que he estado usando desde hace un tiempo. Funciona muy bien para mí, ya que lo necesito principalmente para separar visualmente 2 cols. Y también es receptivo. Lo que significa que si tengo columnas una al lado de la otra en tamaños de pantalla grande y medio, entonces usaría la clase col-md-border , que esconderí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, puedes 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:

Los cols deben estar dentro de un elemento donde no hay otros cols; 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 borde derecho.

.col-md-border + .col-md-border coincide con el segundo div con la misma clase si estos dos están uno al lado del otro y agrega margen izquierdo y -1px margen negativo. El margen negativo es por qué ya no importa qué columna tiene una altura mayor y el separador tendrá 1px la misma altura que la columna más alta.

También tiene algunos problemas ...

1. Cuando intenta ser inteligente / flojo y usa la clase col-XX-X junto con las clases hidden-XX / visible-XX dentro del mismo elemento de fila.
2. Cuando tienes muchas columnas y necesitas un pixel perfecto. Como mueve n-1 columna 1px a la izquierda.

... Pero, por otro lado, es receptivo, funciona muy bien para html simple y es fácil crear estas clases para todos los tamaños de pantalla de arranque.

Answer 3

Bueno, lo que hice fue quitar la canaleta entre los tramos respectivos y luego dibujar un borde izquierdo para el tramo izquierdo y un borde derecho para el tramo correcto de tal manera que sus bordes se superpusieron solo para dar una sola línea. De esta manera, la línea visible será simplemente 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, me funciona

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

Answer 5

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. Dale a las otras columnas un margen negativo para compensar las diferencias de posición.

Por ejemplo, mis tres clases de columna:

.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 utilizar #ddd si desea el mismo color que los divisores horizontales de Bootstrap.

Answer 6

Si su código se ve así:

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

Entonces supongo que estás usando DIVS adicionales dentro del DIVS "span6" para mantener / diseñar tu contenido. Asi que...

<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 un poco de CSS a la clase "mycontent-left" para crear su divisor.

.mycontent-left {
  border-right: 1px dashed #333;
}

Answer 7

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 libre (:: after o :: before).

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

Y agrega esto a tu 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.

Answer 8

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%;
}

Answer 9

Use 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;
}

Answer 10

.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="http://getbootstrap.com/dist/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>