divisor vertical entre duas colunas no bootstrap

86

Estou usando o bootstrap do Twitter e tenho uma linha com duas colunas (span6). Como faço para criar uma divisória vertical entre os dois vãos.

Obrigado, Murtaza

html css twitter-bootstrap murtaza52
fonte
Fiz uma versão que não requer elementos extras: stackoverflow.com/questions/11815081/…
Ross Angus
o que é (span6)?
Yevgeniy Afanasyev

Respostas:

97

Se o seu código for assim:

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

Então eu diria que você está usando DIVS adicionais dentro do DIVS "span6" para manter / estilizar seu conteúdo. Então...

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

Portanto, você pode simplesmente adicionar algum CSS à classe "mycontent-left" para criar seu divisor.

.mycontent-left {
  border-right: 1px dashed #333;
}
Billy Moat
fonte
1
o problema com o acima é que a fronteira adere ao meu conteúdo no primeiro período. No primeiro período, tenho uma forma e a borda envolve seu conteúdo. Como posso separá-lo?
murtaza52
Simples - adicione algum preenchimento aos DIVS à esquerda e à direita do conteúdo.
Billy Moat
10
O problema aconteceria se o conteúdo da direita <span>fosse mais alto que o da esquerda. Nesse caso, a linha vertical será feia.
lvarayut
Se as colunas forem de alturas diferentes, você pode fazer a linha correr totalmente para baixo, definindo min-height: 100%; height: 100%;no CSS para o contêiner dive os divcontendo cada coluna.
raul
@raul eu acredito que só funciona se você estiver usando o flexbox. Se você estiver usando floats nos col-*divs, isso não 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 snippet

Santirisco
fonte
1
Use o seletor '+' e você não precisa da primeira e da última classe filha:.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 solução é a melhor
Wai Yan Hein
21

No Bootstrap 4, há a classe de utilitário border-rightque você pode usar.

Por exemplo, você pode fazer:

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

Bem, aqui está outra opção que venho usando há algum tempo. Funciona muito bem para mim, já que preciso separar visualmente 2 colunas. E também é responsivo. O que significa que, se eu tiver colunas próximas uma da outra em telas de tamanho médio e grande, usarei a classe col-md-border, que ocultaria o separador em telas de tamanhos menores.

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

No scss, você pode gerar todas as classes necessárias provavelmente a partir deste:

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>

Como funciona:

As cols devem estar dentro de um elemento onde não há outras cols, caso contrário, os seletores podem não funcionar como esperado.

.col-md-border:not(:last-child)corresponde a todos, exceto o último elemento antes de .row close e adiciona a borda direita a ele.

.col-md-border + .col-md-bordercorresponde ao segundo div com a mesma classe se esses dois estiverem próximos um do outro e adiciona borda esquerda e margem negativa de -1px. A margem negativa é por que não importa mais qual coluna tem maior altura e o separador terá 1px a mesma altura da coluna mais alta.

Ele também tem alguns problemas ...

  1. Quando você tenta ser inteligente / preguiçoso e usar col-XX-Xclass junto com hidden-XX/ visible-XXclasses dentro do mesmo elemento de linha.
  2. Quando você tem muitas colunas e precisa de um pixel perfeito. Uma vez que move n-1 coluna 1px para a esquerda.

... Mas por outro lado é responsivo, funciona muito bem para html simples e é fácil criar essas classes para todos os tamanhos de tela de bootstrap.

Artur Käpp
fonte
8

Para corrigir a aparência feia de um divisor ser muito curto quando o conteúdo de uma coluna é mais alto, adicione bordas a todas as colunas. Dê a cada outra coluna uma margem negativa para compensar as diferenças de posição.

Por exemplo, minhas três classes de coluna:

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

E o 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>

Certifique-se de usar #ddd se quiser a mesma cor das divisórias horizontais do Bootstrap.

Becca
fonte
Gosto dessa solução, mas ela foi projetada para apenas três ou mais colunas. E se você quiser apenas dois? Seu div ".borders" intermediário não estará lá para ajustar as margens.
Matthew Zackschewski de
6

Se você ainda está procurando a melhor solução em 2018, descobri que funciona perfeitamente se você tiver pelo menos um pseudo elemento livre (:: depois ou :: antes).

Você apenas tem que adicionar classe à sua linha assim: <div class="row vertical-divider ">

E adicione isso ao seu 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;
}

Qualquer linha com esta classe agora terá divisor vertical entre todas as colunas que contém ...

Você pode ver como isso funciona neste exemplo.

Banana Developer
fonte
1
Omita o - in [class * = 'col-'] (para [class * = 'col']) para compatibilidade do bootstrap 4 com a classe "col"
Trey Dibler
apenas um comentário "A propriedade é ignorada devido ao display. Com 'display: inline', as propriedades width, height, margin-top, margin-bottom e float não têm efeito.css"
Shuja Ahmed
5

Se você quiser um divisor vertical entre 2 colunas, tudo que você precisa é adicionar 

class="col-6 border-left"

para um de seus div-s de coluna

MAS

No mundo do design responsivo, às vezes você pode precisar fazer com que ele desapareça.

A solução está desaparecendo <hr>+ desaparecendo <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/

testado no Bootstrap 4.1

Yevgeniy Afanasyev
fonte
4

Eu testei. Funciona bem.

.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
fonte
1
Funciona, perfeitamente como necessário, também deveria ter explicado o que você fez.
Atik M.
Absolutamente perfeito e totalmente responsivo - mesmo quando as colunas são empilhadas em telas menores, a borda desaparece, como você gostaria! Uma ótima solução fácil, obrigado! :)
rmcsharry
1
não está funcionando, o separador certo ainda está lá, dê uma olhada aqui: jsfiddle.net/k4uavbtz
Yevgeniy Afanasyev
Funciona para mais de 3 colunas. Ao usar apenas duas colunas, o divisor segue a altura da coluna esquerda. Portanto, se a coluna da direita for mais longa, a borda não será alta o suficiente.
Matthew Zackschewski de
4

Com o Bootstrap 4 você pode usar bordas , evitando escrever outro CSS.

borda esquerda

E se você quiser espaço entre o conteúdo e a borda, pode usar preenchimento . (neste exemplo, o preenchimento esquerdo 4px)

pl-4

Exemplo: 

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

WalterV
fonte
2

Deve abrir a página inteira para ver as fronteiras!

Adicionadas cláusulas de largura de mídia no CSS para que não haja fronteiras desagradáveis ​​no lado compatível com dispositivos móveis. Espero que isto ajude! Isso será redimensionado para o comprimento da coluna mais longa. Testado em .col-md-4 e .col-md-6 e suponho que seja compatível com o resto. No entanto, não há garantias.

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 snippet

Matthew Zackschewski
fonte
2

Supondo que você tenha um espaço de coluna, esta é uma opção. Rebalance as colunas dependendo do que você precisa.

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

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

Bem, o que fiz foi remover a sarjeta entre os respectivos vãos, em seguida, desenhando uma borda esquerda para o vão esquerdo e uma borda direita para o vão direito de forma que suas bordas se sobrepusessem apenas para dar uma única linha. Desta forma, a linha visível será apenas uma das bordas.

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>

Experimente isso funciona para mim

flexxxit
fonte
1
É feio quando os 2 divs não têm a mesma altura.
Alain Tiemblo
-2

Use isto, 100% garantido: -

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