séparateur vertical entre deux colonnes dans bootstrap

Question

J'utilise twitter bootstrap, et j'ai une ligne qui a deux colonnes (span6). Comment puis-je créer un séparateur vertical entre les deux span.

Merci, Murtaza

Answer 1

Si votre code ressemble à ceci :

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

Je suppose donc que vous utilisez des DIVS supplémentaires à l'intérieur des DIVS "span6" pour contenir/styliser votre contenu ? Donc...

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

Vous pouvez donc simplement ajouter une feuille de style CSS à la classe "mycontent-left" pour créer votre séparateur.

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

Answer 2

Dans Bootstrap 4, il y a la classe utilitaire border-right que vous pouvez utiliser.

Ainsi, par exemple, vous pouvez faire :

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

Answer 3

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

Answer 4

Voici une autre option que j'utilise depuis un certain temps déjà. Elle me convient parfaitement car j'en ai surtout besoin pour séparer visuellement deux colonnes. Et elle est également réactive. Cela signifie que si j'ai des colonnes côte à côte sur des écrans de taille moyenne et grande, j'utiliserai la classe col-md-border ce qui permet de masquer le séparateur sur les écrans de petite taille.

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, vous pouvez générer toutes les classes nécessaires probablement à partir de cela :

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>  

Comment cela fonctionne :

Les colonnes doivent se trouver dans un élément où il n'y a pas d'autres colonnes, sinon les sélecteurs risquent de ne pas fonctionner comme prévu.

.col-md-border:not(:last-child) correspond à tout sauf au dernier élément avant la fermeture de .row et y ajoute une bordure droite.

.col-md-border + .col-md-border fait correspondre le deuxième div avec la même classe si les deux sont l'un à côté de l'autre et ajoute une bordure gauche et une marge négative de -1px. La marge négative est la raison pour laquelle la colonne la plus haute n'a plus d'importance et le séparateur sera de 1px de la même hauteur que la colonne la plus haute.

Il a aussi quelques problèmes...

1. Quand tu essaies d'être malin/lazy et que tu utilises col-XX-X ainsi que la classe hidden-XX / visible-XX dans le même élément de ligne.
2. Lorsque vous avez beaucoup de colonnes et que vous avez besoin d'une chose parfaite au pixel près. Puisqu'il déplace n-1 colonne de 1px vers la gauche.

... Mais d'un autre côté, il est réactif, fonctionne très bien pour le html simple et il est facile de créer ces classes pour toutes les tailles d'écran bootstrap.

Answer 5

Pour éviter qu'un séparateur soit trop court lorsque le contenu d'une colonne est plus grand, ajoutez des bordures à toutes les colonnes. Donnez à toutes les autres colonnes une marge négative pour compenser les différences de position.

Par exemple, mes classes à trois colonnes :

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

Et le 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>

Veillez à utiliser #ddd si vous voulez la même couleur que les séparateurs horizontaux de Bootstrap.