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

Question

我正在使用 twitter 引导程序，并且有一排有两列 (span6)。如何在两个跨度之间创建垂直分隔线。

谢谢， 穆尔塔萨

Answer 1

如果您的代码如下所示：

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

Answer 2

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

例如你可以这样做：

<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

这是我已经使用了一段时间的另一个选项。它对我很有用，因为我最需要它在视觉上分开 2 列。而且它也是响应式的。这意味着，如果我在中等和大屏幕尺寸中的列彼此相邻，那么我将使用 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，如果这两个彼此相邻并添加左边框和 -1px 负边距。负边距是为什么哪一列的高度更大不再重要，分隔符将与最高列的高度相同 1px。

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

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

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

Answer 5

要解决当一列的内容较高时分隔线太短的丑陋外观，请为所有列添加边框。给所有其他列一个负边距以补偿位置差异。

比如我的三列类：

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

Answer 6

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

Answer 7

如果您在 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;
}

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

您可以在 this example. 中查看其工作原理

Answer 8

如果你想要两列之间的垂直分隔线，你只需要添加

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 上测试

Answer 9

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

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

Answer 10

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

在 CSS 中添加了媒体宽度条款，因此在移动友好方面没有任何令人讨厌的边框。希望这可以帮助！这将调整为最长列的长度。在 .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>

Answer 11

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

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

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

Answer 12

我所做的是移除各个跨度之间的排水沟，然后为左跨度绘制左边框，为右跨度绘制右边框，使它们的边框重叠仅给出一条线。这样，可见线将只是边框之一。

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>

试试这个对我有用

Answer 13

我在 Bootstrap 3.3.7 中寻找垂直分隔符，但默认情况下它们没有，所以我编写了一个简单的单行 div 来完成这项工作。 p>

看看它是否适合你。

<div style="display: inline;border-right: 1px solid gray; padding:0 5px;"></div>

感谢您的阅读。干杯。

Answer 14

正如@WalterV 上面回答的那样，已更改为 Bootstrap 5+：

<div class="row">
      <div class="offset-6 border-start border-5">First</div>
      <div class="offset-6 border-start border-5">Second</div>
</div>

Answer 15

从 bootstrap v4 开始，您可以使用此代码

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

Answer 16

使用这个，100% 保证：-

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