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

如果您以前从未使用过，请检查我的tutorial on CSS columns。

Answer 2

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

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

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

Answer 3

您始终可以使用HTML <hr>代码。