web-dev-qa-db-fra.com

séparateur vertical entre deux colonnes dans bootstrap

J'utilise Twitter bootstrap, et j'ai une ligne qui a deux colonnes (span6). Comment créer un séparateur vertical entre les deux travées.

Merci Murtaza

htmlcsstwitter-bootstrap
70
murtaza52

Si votre code ressemble à ceci:

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

Ensuite, je suppose que vous utilisez des DIVS supplémentaires dans le DIVS "span6" pour conserver/mettre en forme votre contenu? Alors...

<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 des CSS à la classe "mycontent-left" pour créer votre diviseur.

.mycontent-left {
  border-right: 1px dashed #333;
}
80
Billy Moat
.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>
28
Santirisco

Eh bien voici une autre option que j'utilise depuis un certain temps maintenant. Cela fonctionne très bien pour moi car j'ai surtout besoin de séparer visuellement 2 colonnes. Et c'est aussi réactif. Ce qui signifie que si j'ai des colonnes côte à côte dans des tailles d'écran moyennes et grandes, j'utiliserais la classe col-md-border, qui masquerait le séparateur sur des tailles d'écran plus petites.

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

Dans scss, vous pouvez probablement générer toutes les classes nécessaires à partir de ceci:

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 ça marche:

Les colonnes doivent être à l'intérieur d'un élément où il n'y a pas d'autres colonnes, sinon les sélecteurs pourraient 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 la deuxième div à la même classe si ces deux sont côte à côte et ajoute la bordure gauche et la marge négative -1px. La marge négative est la raison pour laquelle la colonne dont la hauteur est la plus grande n'a plus d'importance et le séparateur aura 1px la même hauteur que la colonne la plus haute.

Il y a aussi des problèmes ...

  1. Lorsque vous essayez d'être intelligent/fainéant et que vous utilisez col-XX-X class avec hidden-XX/visible-XX classes à l'intérieur du même élément de ligne.
  2. Lorsque vous avez beaucoup de colonnes et que vous avez besoin d’un pixel parfait. Puisqu'il se déplace n-1 colonne 1px vers la gauche.

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

14
Artur Käpp

Pour corriger l'aspect trop laid d'un séparateur trop court lorsque le contenu d'une colonne est plus grand, ajoutez des bordures à toutes les colonnes. Attribuez à chaque colonne une marge négative pour compenser les différences de position.

Par exemple, mes trois classes de 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>

Assurez-vous d'utiliser #ddd si vous voulez la même couleur que les séparateurs horizontaux de Bootstrap.

6
Becca

Je l'ai testé. Ça fonctionne 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>
3
Chiranjit Ghosh

Si vous êtes toujours à la recherche de la meilleure solution en 2018, j'ai trouvé que cela fonctionnait parfaitement si vous aviez au moins un pseudo-élément libre (:: after ou :: before).

Vous devez juste ajouter class à votre ligne comme ceci: <div class="row diviseur vertical ">

Et ajoutez ceci à votre 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;
}

Toute ligne de cette classe aura désormais un séparateur vertical entre toutes les colonnes qu'elle contient ...

Vous pouvez voir comment cela fonctionne dans cet exemple.

3
Banana Developer

Doit s'ouvrir en pleine page pour voir les frontières!

Ajout de clauses de largeur de média dans le CSS afin qu'il n'y ait pas de frontières désagréables du côté des mobiles. J'espère que cela t'aides! Cela redimensionnera à la longueur de la plus longue colonne. Testé sur .col-md-4 et .col-md-6 et mon hypothèse est qu'il est compatible avec le reste. Aucune garantie cependant.

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>
2
Matthew Zackschewski

Dans Bootstrap 4, vous pouvez utiliser la classe d'utilitaires border-right.

Ainsi, par exemple, vous pouvez faire:

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

En supposant que vous ayez un espace de colonne, ceci est une option. Rééquilibrez les colonnes en fonction de vos besoins.

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

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

Ce que j’ai fait, c’est de retirer le gouttière entre les travées respectives, puis de tracer une bordure gauche pour la travée gauche et une bordure droite pour la travée droite de telle sorte que leurs bordures se chevauchent pour ne former qu’une seule ligne. De cette façon, la ligne visible ne sera qu’une des frontières.

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>

Essayez ça marche pour moi

0
flexxxit