diviseur vertical entre deux colonnes dans bootstrap

Question 1

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

Merci, Murtaza

Question 2

Si votre code ressemble à ceci:

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

Alors je suppose que vous utilisez DIVS supplémentaires dans le DIVS "span6" pour tenir / 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 du CSS à la classe "mycontent-left" pour créer votre diviseur.

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

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

Développer l'extrait

Question 4

Dans Bootstrap 4, il existe la classe utilitaire border-rightque 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>

Question 5

Eh bien, voici une autre option que j'utilise depuis un certain temps maintenant. Cela fonctionne très bien pour moi car j'en ai surtout besoin pour séparer visuellement 2 cols. 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 générer toutes les classes nécessaires probablement à 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 fonctionne:

Les cols doivent être à l'intérieur d'un élément où il n'y a pas d'autres cols sinon les sélecteurs risquent de ne pas fonctionner comme prévu.

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

.col-md-border + .col-md-bordercorrespond au deuxième div avec la même classe si ces deux sont côte à côte et ajoute une bordure gauche et une marge négative de -1px. La marge négative est la raison pour laquelle peu importe quelle colonne a la plus grande hauteur et le séparateur aura 1px la même hauteur que la colonne la plus haute.

Il y a aussi quelques problèmes ...

Lorsque vous essayez d'être intelligent / paresseux et d'utiliser col-XX-Xclass avec hidden-XX/ visible-XXclasses dans le même élément de ligne.
Lorsque vous avez beaucoup de colonnes et que vous avez besoin d'un pixel parfait. Puisqu'il déplace la colonne n-1 1px vers la gauche.

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

Question 6

Pour corriger l'apparence moche d'un diviseur trop court lorsque le contenu d'une colonne est plus grand, ajoutez des bordures à toutes les colonnes. Donnez à chaque autre 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 diviseurs horizontaux de Bootstrap.

Question 7

Si vous êtes toujours à la recherche de la meilleure solution en 2018, j'ai trouvé la manière dont cela fonctionne parfaitement si vous avez au moins un pseudo élément gratuit (:: after ou :: before).

Il vous suffit d'ajouter une classe à votre ligne comme ceci: <div class="row vertical-divider ">

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 avec cette classe aura désormais un diviseur vertical entre toutes les colonnes qu'elle contient ...

Vous pouvez voir comment cela fonctionne dans cet exemple.

Question 8

Si vous voulez un séparateur vertical entre 2 colonnes, il vous suffit d'ajouter

class="col-6 border-left"

à l'une de vos colonnes div-s

MAIS

Dans le monde du responsive design, vous devrez peut-être parfois le faire disparaître.

La solution disparaît <hr>+ disparaît <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/

testé sur Bootstrap 4.1

Question 9

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>

Question 10

Avec Bootstrap 4, vous pouvez utiliser des bordures , en évitant d'écrire d'autres CSS.

bordure gauche

Et si vous voulez un espace entre le contenu et la bordure, vous pouvez utiliser un remplissage . (dans cet exemple, padding left 4px)

pl-4

Exemple:

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

Développer l'extrait

Question 11

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é mobile des choses. J'espère que cela t'aides! Cela redimensionnera à la longueur de la colonne la plus longue. 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>

Développer l'extrait

Question 12

En supposant que vous ayez un espace de colonne, c'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%;
}

Question 13

Eh bien, ce que j'ai fait a été de supprimer la gouttière entre les travées respectives, puis de dessiner 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 juste pour donner 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 ceci, cela fonctionne pour moi

Question 14

Utilisez ceci, 100% garanti: -

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

Answer 1

86

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

Merci, Murtaza

html css twitter-bootstrap murtaza52
la source

J'ai fait une version qui ne nécessite pas d'éléments supplémentaires: stackoverflow.com/questions/11815081/…

Ross Angus

qu'est-ce que (span6)?

Yevgeniy Afanasyev

Answer 2

J'ai fait une version qui ne nécessite pas d'éléments supplémentaires: stackoverflow.com/questions/11815081/…

Ross Angus

Answer 3

qu'est-ce que (span6)?

Yevgeniy Afanasyev

Answer 4

97

Si votre code ressemble à ceci:

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

Alors je suppose que vous utilisez DIVS supplémentaires dans le DIVS "span6" pour tenir / 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 du CSS à la classe "mycontent-left" pour créer votre diviseur.

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

Billy Moat
la source

1

le problème avec ce qui précède est que la bordure colle à mon contenu dans la première travée. Dans la première travée, j'ai un formulaire et la bordure épouse son contenu. Comment puis-je le séparer?

murtaza52

Simple - ajoutez un peu de remplissage aux DIVS content-left et content-right.

Billy Moat

10

Le problème se produirait si le contenu de la droite était <span>supérieur à celui de gauche. Dans ce cas, la ligne verticale sera moche.

lvarayut

Si les colonnes sont de hauteurs différentes, vous pouvez faire en sorte que la ligne descende complètement en définissant min-height: 100%; height: 100%;dans le CSS pour le conteneur divet les divs contenant chaque colonne.

raul

@raul Je crois que cela ne fonctionne que si vous utilisez flexbox. Si vous utilisez des flottants sur les col-*divs, cela ne fonctionnera pas.

Jacob Stamm

Answer 5

1

le problème avec ce qui précède est que la bordure colle à mon contenu dans la première travée. Dans la première travée, j'ai un formulaire et la bordure épouse son contenu. Comment puis-je le séparer?

murtaza52

Answer 6

Simple - ajoutez un peu de remplissage aux DIVS content-left et content-right.

Billy Moat

Answer 7

10

Le problème se produirait si le contenu de la droite était <span>supérieur à celui de gauche. Dans ce cas, la ligne verticale sera moche.

lvarayut

Answer 8

Si les colonnes sont de hauteurs différentes, vous pouvez faire en sorte que la ligne descende complètement en définissant min-height: 100%; height: 100%;dans le CSS pour le conteneur divet les divs contenant chaque colonne.

raul

Answer 9

@raul Je crois que cela ne fonctionne que si vous utilisez flexbox. Si vous utilisez des flottants sur les col-*divs, cela ne fonctionnera pas.

Jacob Stamm

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="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>

Développer l'extrait

Answer 11

1

Utilisez le sélecteur '+' et vous n'avez pas besoin de premier et dernier cours pour enfants:

.row.vertical-divider div[class^="col-"] + div[class^="col-"] {     text-align: center;     padding-bottom: 100px;     margin-bottom: -100px;      border-left: 3px solid #0396D1;    }

Vasyl

Answer 12

1

Cette solution est la meilleure

Wai Yan Hein

Answer 13

Dans Bootstrap 4, il existe la classe utilitaire border-rightque 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 14

Eh bien, voici une autre option que j'utilise depuis un certain temps maintenant. Cela fonctionne très bien pour moi car j'en ai surtout besoin pour séparer visuellement 2 cols. 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 générer toutes les classes nécessaires probablement à 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 fonctionne:

Les cols doivent être à l'intérieur d'un élément où il n'y a pas d'autres cols sinon les sélecteurs risquent de ne pas fonctionner comme prévu.

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

.col-md-border + .col-md-bordercorrespond au deuxième div avec la même classe si ces deux sont côte à côte et ajoute une bordure gauche et une marge négative de -1px. La marge négative est la raison pour laquelle peu importe quelle colonne a la plus grande hauteur et le séparateur aura 1px la même hauteur que la colonne la plus haute.

Il y a aussi quelques problèmes ...

Lorsque vous essayez d'être intelligent / paresseux et d'utiliser col-XX-Xclass avec hidden-XX/ visible-XXclasses dans le même élément de ligne.
Lorsque vous avez beaucoup de colonnes et que vous avez besoin d'un pixel parfait. Puisqu'il déplace la colonne n-1 1px vers la gauche.

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

Answer 15

Pour corriger l'apparence moche d'un diviseur trop court lorsque le contenu d'une colonne est plus grand, ajoutez des bordures à toutes les colonnes. Donnez à chaque autre 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 diviseurs horizontaux de Bootstrap.

Answer 16

J'aime cette solution mais elle est conçue pour seulement trois colonnes ou plus. Et si vous n'en vouliez que deux? Votre div ".borders" intermédiaire ne sera pas là pour ajuster les marges.

Matthew Zackschewski

Answer 17

Si vous êtes toujours à la recherche de la meilleure solution en 2018, j'ai trouvé la manière dont cela fonctionne parfaitement si vous avez au moins un pseudo élément gratuit (:: after ou :: before).

Il vous suffit d'ajouter une classe à votre ligne comme ceci: <div class="row vertical-divider ">

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 avec cette classe aura désormais un diviseur vertical entre toutes les colonnes qu'elle contient ...

Vous pouvez voir comment cela fonctionne dans cet exemple.

Answer 18

1

Omettre le - dans [class * = 'col-'] (to [class * = 'col']) pour la compatibilité bootstrap 4 avec la classe "col"

Trey Dibler

Answer 19

juste un commentaire "La propriété est ignorée en raison de l'affichage. Avec 'display: inline', les propriétés width, height, margin-top, margin-bottom et float n'ont aucun effet.css"

Shuja Ahmed

Answer 20

Si vous voulez un séparateur vertical entre 2 colonnes, il vous suffit d'ajouter

class="col-6 border-left"

à l'une de vos colonnes div-s

MAIS

Dans le monde du responsive design, vous devrez peut-être parfois le faire disparaître.

La solution disparaît <hr>+ disparaît <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/

testé sur Bootstrap 4.1

Answer 21

4

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>

Chiranjit Ghosh
la source

1

Les œuvres, parfaitement conformes aux besoins, auraient également dû expliquer ce que vous avez fait.

Atik M.

Absolument parfait et entièrement réactif - même lorsque les colonnes sont empilées sur des écrans plus petits, la bordure disparaît, comme vous le souhaitez! Une excellente solution facile, merci! :)

rmcsharry

1

ne fonctionne pas, le bon séparateur est toujours là, regardez ici: jsfiddle.net/k4uavbtz

Yevgeniy Afanasyev

Fonctionne pour 3+ colonnes. Lorsque vous utilisez seulement deux colonnes, le séparateur suit la hauteur de la colonne de gauche. Par conséquent, si la colonne de droite est plus longue, la bordure ne sera pas assez haute.

Matthew Zackschewski

Answer 22

1

Les œuvres, parfaitement conformes aux besoins, auraient également dû expliquer ce que vous avez fait.

Atik M.

Answer 23

Absolument parfait et entièrement réactif - même lorsque les colonnes sont empilées sur des écrans plus petits, la bordure disparaît, comme vous le souhaitez! Une excellente solution facile, merci! :)

rmcsharry

Answer 24

1

ne fonctionne pas, le bon séparateur est toujours là, regardez ici: jsfiddle.net/k4uavbtz

Yevgeniy Afanasyev

Answer 25

Fonctionne pour 3+ colonnes. Lorsque vous utilisez seulement deux colonnes, le séparateur suit la hauteur de la colonne de gauche. Par conséquent, si la colonne de droite est plus longue, la bordure ne sera pas assez haute.

Matthew Zackschewski

Answer 26

Avec Bootstrap 4, vous pouvez utiliser des bordures , en évitant d'écrire d'autres CSS.

bordure gauche

Et si vous voulez un espace entre le contenu et la bordure, vous pouvez utiliser un remplissage . (dans cet exemple, padding left 4px)

pl-4

Exemple:

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

Développer l'extrait

Answer 27

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é mobile des choses. J'espère que cela t'aides! Cela redimensionnera à la longueur de la colonne la plus longue. 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>

Développer l'extrait

Answer 28

En supposant que vous ayez un espace de colonne, c'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%;
}

Answer 29

Eh bien, ce que j'ai fait a été de supprimer la gouttière entre les travées respectives, puis de dessiner 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 juste pour donner 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 ceci, cela fonctionne pour moi

Answer 30

1

C'est moche quand les 2 divs n'ont pas la même hauteur.

Alain Tiemblo du

Answer 31

Utilisez ceci, 100% garanti: -

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

diviseur vertical entre deux colonnes dans bootstrap

Réponses:

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