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

Question

我正在使用twitter bootstrap,并且有一行有两列(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

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

Answer 3

那么这是我已经使用了一段时间的另一种选择.它对我很有用,因为我主要需要它在视觉上分开2个cols.而且它也很敏感.这意味着如果我在中型和大型屏幕尺寸中彼此相邻的列,那么我将使用该类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>  

这个怎么运作:

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

.col-md-border:not(:last-child)匹配除.row关闭之外的所有元素,并向其添加右边框.

.col-md-border + .col-md-border如果这两个div彼此相邻并且添加左边框和-1px负边距,则将第二个div与相同的类匹配.负边距是为什么它不再重要哪个列具有更高的高度,并且分隔符将是与最高列相同的高度1px.

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

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

...但另一方面它响应迅速,适用于简单的html,并且很容易为所有引导屏幕大小创建这些类.

Answer 4

使用Bootstrap 4，您可以使用border，避免编写其他 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 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中border-right，可以使用实用程序类。

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

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

Answer 7

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

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 8

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

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

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