引导程序中两列之间的垂直分隔线

Answers:

97

如果您的代码如下所示：

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

然后，我假设您正在“ span6” DIVS中使用其他DIVS来保存/样式化您的内容？所以...

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

因此，您只需在“ mycontent-left”类中添加一些CSS即可创建分隔符。

.mycontent-left {
  border-right: 1px dashed #333;
}
— 比利·护城河
source
1
上面的问题是，边框在第一个跨度中一直粘贴到我的内容上。在第一个跨度中，我有一个表单，边框包围了它的内容。我该如何分开呢？
— murtaza52，2013年
简单-在content-left和content-right DIVS中添加一些填充。
— 比利·护城河
10
如果右边的内容<span>高于左边的内容，则会发生此问题。在这种情况下，垂直线将很难看。
— lvarayut 2014年
如果列的高度不同，则可以通过min-height: 100%; height: 100%;在CSS中为容器div和div包含每列的s进行设置，使行一直向下延伸。
— 罗尔
@raul我相信只有在使用flexbox时才有效。如果您在col-*div上使用浮点数，则此方法将无效。
— 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>
展开摘要

— 桑蒂里斯科
source
1
使用“ +”选择器，您不需要第一个和最后一个子类：.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
该解决方案是最好的
— 惠燕嘿嗯
21

在Bootstrap 4中border-right，可以使用实用程序类。

因此，例如，您可以执行以下操作：

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

好吧，这是我已经使用了一段时间的另一个选项。它对我来说很棒，因为我最需要它在视觉上分开2个列。而且它也很敏感。这意味着，如果我在中型和大型屏幕上有相邻的列，那么我将使用class col-md-border，它将在较小的屏幕上隐藏分隔符。

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

在scss中，您可以从中生成所有需要的类：

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>

这个怎么运作：

列必须位于没有其他列的元素内，否则选择器可能无法按预期工作。

.col-md-border:not(:last-child)匹配.row close之前除最后一个元素以外的所有元素，并为其添加右边框。

.col-md-border + .col-md-border如果这两个div彼此相邻，则将其与第二个div匹配，并添加左边框和-1px负边距。负边距就是为什么哪一列的高度都不再重要，并且分隔符与最高列的高度相同1px的原因了。

它也确实有一些问题...

  1. 当您尝试变得聪明/懒惰并在同一行元素中将col-XX-Xclass和hidden-XX/ visible-XXclasses一起使用时。
  2. 当您有很多列并且需要像素完美的东西时。由于它将n-1列向左移动1px。

...但是，另一方面，它具有响应能力，非常适合简单的html，并且很容易为所有引导屏幕尺寸创建这些类。

— 阿图尔·卡普（ArturKäpp）
source
8

要解决分隔符在某一列的内容较高时显得太短的丑陋外观的问题，请在所有列中添加边框。给每隔一列负的边距以补偿位置差异。

例如，我的三个列类：

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

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

如果要与Bootstrap的水平分隔线使用相同的颜色，请确保使用#ddd。

— 贝卡
source
我喜欢此解决方案，但它仅适用于三列或更多列。如果您只想要两个怎么办？您位于中间的“ .borders” div，因此无法调整边距。
— Matthew Zackschewski
6

如果您仍在寻找2018年的最佳解决方案，那么我发现，如果您至少有一个免费的伪元素（:: after或:: before），则可以完美地实现此目的。

您只需要像这样将类添加到您的行中：<div class="row vertical-divider ">

并将其添加到您的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;
}

此类的任何行现在将在其包含的所有列之间具有垂直分隔线...

您可以在此示例中看到它的工作方式。

— 香蕉开发商
source
1
省略[class * ='col-']中的-（至[class * ='col']），以获得与类“ col”兼容的引导程序4
— Trey Dibler
只是一个注释“由于显示，属性被忽略。使用'display：inline'，宽度，高度，边距顶部，边距底部和浮点属性无效。css”
— Shuja Ahmed
5

如果要在两列之间使用垂直分隔线，只需添加 

class="col-6 border-left"

到您的一列div-s

但

在响应式设计领域，您有时可能需要使其消失。

解决方案正在消失<hr>+消失<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/

在Bootstrap 4.1上测试

— 叶夫根尼·阿凡纳西耶夫（Yevgeniy Afanasyev）
source
4

我已经测试过了 它工作正常。

.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）
source
1
完美无瑕的作品也应该解释了你所做的事情。
— Atik M.
绝对完美，并且完全响应-即使您将列堆叠在较小的屏幕上，边框也会消失，就像您想要的那样！一个非常简单的解决方案，谢谢！:)
— rmcsharry17年
1
无法正常工作，正确的分隔符仍然存在，在这里查看：jsfiddle.net/k4uavbtz
— Yevgeniy Afanasyev
适用于3列以上。仅使用两列时，分隔线将跟随左列的高度。因此，如果右列较长，则边框将不够高。
— Matthew Zackschewski
4

使用Bootstrap 4，您可以使用borders，而无需编写其他CSS。

左边框

如果您想在内容和边框之间留出空间，可以使用padding。（在此示例中，左侧填充了4px）

PL-4

例： 

    <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>
展开摘要

— 沃尔特
source
2

必须全页打开才能看到边框！

CSS中增加了media width子句，因此在移动友好方面没有任何讨厌的边界。希望这可以帮助！这将调整为最长列的长度。在.col-md-4和.col-md-6上进行了测试，我的假设是它与其余版本兼容。虽然没有保证。

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>
展开摘要

— 马修·扎克斯基斯基
source
2

假设您有一个列空间，这是一个选项。根据需要重新平衡列。

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

.vhr{
  border-right: 1px solid #333;
  height:100%;
}
— 雅各布·潘恩
source
0

好吧，我要做的是删除各个跨度之间的装订线，然后为左跨度绘制一个左边界，为右跨度绘制一个右边界，以使它们的边界重叠在一起以给出一条直线。这样，可见线将只是边框之一。

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

试试这个对我有用

— flexxxit
source
1
当2个div的高度不同时，这很丑陋。
— Alain Tiemblo 2015年
-2

使用此，100％保证：-

vr {
  margin-left: 20px;
  margin-right: 20px;
  height: 50px;
  border: 0;
  border-left: 1px solid #cccccc;
  display: inline-block;
  vertical-align: bottom;
}
— mn128b
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.