css - 通过 Bootstrap，如何在井中添加垂直分隔器？

Question

我正在使用引导程序来画一口井。在这口井中，我创建了两个span6，并想在这两列之间绘制一个垂直分隔线。我怎样才能实现我的目标？

Answer 1

在除第一列之外的所有列上绘制左边框：

.well [class^="span"] + [class^="span"] {
    margin-left: -1px; /* compensate border width */
    border-left: 1px solid #e3e3e3;
}

---

或者，可以使用 CSS 列（需要前缀）：

.well.col {
    columns: 2;
    column-gap: 20px;
    column-rule: 1px solid #e3e3e3;
}

如果您以前从未使用过它，您应该查看我的 CSS 列教程。

Answer 2

如果您的元素占据了整个宽度，则所选答案会中断，因为边框增加了 1px 太多！为了解决这个问题，您可以调整边距以考虑边界。

.line-right {
  margin-right: -1px;
  border-right: 1px solid black;
}

如果您想要更大的边框，请务必在边距中考虑它！

Answer 3

您始终可以使用 HTML<hr>标记。