verticale de séparation entre deux colonnes dans le bootstrap

Je suis en utilisant twitter bootstrap, et avoir une ligne qui a deux colonnes (span6). Comment puis-je créer un diviseur vertical entre les deux travées.

Grâce,
Murtaza

InformationsquelleAutor murtaza52 | 2013-01-29
  1. 79

    Si votre code ressemble à ceci:

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

    Alors je suppose que vous êtes à l'aide d'autres DIVISIONS au sein de la "span6" DIVS pour la tenue d'/style de 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>

    Alors vous pouvez simplement ajouter un peu de CSS pour le "mycontent-gauche" de la classe pour créer votre diviseur.

    .mycontent-left {
  border-right: 1px dashed #333;
}
    • le problème avec ce qui précède est que la frontière colle à mon contenu dans la première travée. Dans la première travée j'ai un formulaire, et la frontière est étreindre son contenu. Comment puis-je les séparer ?
    • Simple - ajouter un peu de rembourrage pour le contenu à gauche et le contenu à droite de la VRD.
    • Le problème qui se passerait si le contenu du droit <span> plus élevé que celui de gauche. Dans ce cas, la ligne verticale sera moche.
    • Si les colonnes sont de hauteurs différentes, vous pouvez prendre la ligne de courir tout le chemin vers le bas par la mise en min-height: 100%; height: 100%; dans le CSS pour le conteneur div et la divs contenant chaque colonne.
    • Je crois que cela ne fonctionne que si vous utilisez flexbox. Si vous êtes à l'aide de flotteurs sur le col-* vrd, alors cela ne fonctionnera pas.
    InformationsquelleAutor Billy Moat
  2. 28

    CSS:

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

    HTML:

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

    • l'extrait de code ne montre pas une frontière
    • Utilisez " + " du sélecteur, et vous n'avez pas besoin premier et le dernier enfant des classes: .row.vertical-divider div[class^="col-"] + div[class^="col-"] { text-align: center; padding-bottom: 100px; margin-bottom: -100px; border-left: 3px solid #0396D1; }
    • Cette solution est la meilleure
    InformationsquelleAutor Santirisco
  3. 14

    Eh bien, voici une autre option, je l'ai utilisé pendant un certain temps maintenant. Il fonctionne très bien pour moi depuis que j'ai surtout besoin de faire visuellement distinctes de 2 cols. Et c'est également sensible. Ce qui signifie que si j'ai des colonnes uns à côté des autres dans les moyennes et grandes tailles d'écran, alors je voudrais utiliser la classe col-md-border, qui permettrait de masquer le séparateur sur les petites tailles d'écran.

    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 tous besoin les classes probablement de ce:

    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 cols doit être à l'intérieur d'un élément où il n'y a pas d'autres cols, sinon les sélecteurs peuvent ne pas fonctionner comme prévu.

    .col-md-border:not(:last-child) correspond à toutes les mais la dernier élément avant .ligne près et ajoute de la bordure de droite pour cela.

    .col-md-border + .col-md-border correspond à la deuxième div avec la classe même si ces deux sont les unes à côté des autres et ajoute gauche frontière et -1px marge négative. Marge négative est pourquoi il n'a plus d'importance de la colonne qui a une plus grande hauteur et le séparateur sera 1px la même hauteur que le plus haut de la colonne.

    Il ne aussi quelques problèmes...

    1. Lorsque vous essayez d'être intelligent/paresseux et l'utilisation col-XX-X classe avec hidden-XX/visible-XX classes à l'intérieur de la même élément de ligne.
    2. Lorsque vous avez un grand nombre de colonnes et ont besoin d'un pixel quelque chose de parfait. Depuis il se déplace à n-1 colonne de 1px vers la gauche.

    ... Mais d'un autre côté, il est sensible, fonctionne très bien pour l'html simple et il est facile de créer ces classes pour tous bootstrap de taille d'écran.

    InformationsquelleAutor Artur Käpp
  4. 5

    Pour résoudre le laid, regarder d'un diviseur étant trop court lorsque le contenu d'une colonne est plus grand, ajouter des bordures pour toutes les colonnes. Donner à chaque autre colonne une marge négative pour compenser les différences de positions.

    Par exemple, mes trois colonne classes:

    .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 code 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 Bootstrap horizontal de diviseurs.

    • J'aime bien cette solution, mais il est conçu pour seulement trois ou plusieurs colonnes. Si vous souhaitez seulement deux? Vous êtes à la moyenne ".les frontières" div ne sera pas là pour régler les marges.
    • simple et doux, merci
    InformationsquelleAutor Becca
  5. 3

    Je l'ai testé. Il fonctionne très 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>
    • Fonctionne parfaitement comme neeeded , devrait également avoir expliqué ce que vous avez fait .
    • Absolument parfait, et entièrement responsive - même lorsque les colonnes obtenir empilés sur les petits écrans de la frontière disparaît, comme vous voulez! Une excellente solution de facilité, je vous remercie! 🙂
    • pas de travail, le droit séparateur est toujours là, jetez un oeil ici: jsfiddle.net/k4uavbtz
    • Fonctionne pour les+ de 3 colonnes. Lorsque uniquement à l'aide de deux colonnes, le diviseur suit la hauteur de la colonne de gauche. Par conséquent, si la colonne de droite est plus longue, la frontière ne sera pas assez grand.
    InformationsquelleAutor Chiranjit Ghosh
  6. 3

    Si vous êtes toujours à la recherche de la meilleure solution en 2018, j'ai trouvé la façon dont cela fonctionne parfaitement, si vous avez au moins un pseudo-élément ::après ou ::avant de ).

    Vous avez juste à ajouter une classe pour votre ligne comme ceci: <div class="row vertical-diviseur ">

    Et ajouter ceci dans 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 la ligne avec cette classe auront désormais diviseur vertical entre toutes les colonnes qu'il contient...

    Vous pouvez voir comment cela fonctionne dans cet exemple.

    • Omettre la - dans [class*='col-'] (de [class*='col']) pour bootstrap 4 compatibilité avec la classe "col"
    InformationsquelleAutor Banana Developer
  7. 2

    Doit Ouvrir en Pleine Page pour Voir les Frontières!

    Ajouté largeur du support des clauses dans le CSS, donc il n'y a pas de mauvaises frontières sur le mobile-friendly côté des choses. Espérons que cette aide! Cela permettra de redimensionner à 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 si.

    JSFiddle

    CSS:

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

    HTML:

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

    InformationsquelleAutor Matthew Zackschewski
  8. 1

    En supposant que vous avez une colonne de l'espace, c'est une option. Rééquilibrer les colonnes en fonction de ce que vous avez besoin.

    <div class="col-1">
<div class="col-6 vhr">
</div>
</div>
    .vhr{
border-right: 1px solid #333;
height:100%;
}
    InformationsquelleAutor Jacob Paine
  9. 0

    Bien ce que j'ai fait, c'était de retirer la gouttière entre les travées de tracer une bordure gauche de la gauche de la travée et d'une bordure de droite pour le droit de la durée de telle sorte que leurs bords se chevauchent juste pour donner une seule ligne. De cette façon, la ligne visible sera juste l'un 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>

    Essayer ce que cela fonctionne pour moi

    • C'est laid quand les 2 divs n'ont pas la même hauteur.
    InformationsquelleAutor flexxxit
  10. -3

    L'utiliser, 100% garantie de:-

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