CSS 通过 Bootstrap，如何在井中添加垂直分隔线？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12778730/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Via Bootstrap, how can I add a vertical divider in a well?
提问by waitingkuo
I'm using bootstrap to drawing a well. In this well, I create two span6and would like to draw a vertical divider between these two column. How can I achieve my goal?
我正在使用引导程序来画一口井。在这口井中，我创建了两个span6并想在这两列之间绘制一个垂直分隔线。我怎样才能实现我的目标？
回答by Pavlo
Draw the left border on all, but first column:
绘制所有的左边框，但第一列：
.well [class^="span"] + [class^="span"] {
margin-left: -1px; /* compensate border width */
border-left: 1px solid #e3e3e3;
}
Alternatively, CSS columns can be used (prefixes required):
或者，可以使用 CSS 列（需要前缀）：
.well.col {
columns: 2;
column-gap: 20px;
column-rule: 1px solid #e3e3e3;
}
If you have never use it before, you should check my tutorial on CSS columns.
如果你以前从未使用过它，你应该查看我关于 CSS 列的教程。
回答by Tom Prats
The selected answer breaks if your elements take up the entire width because the border adds 1px too many! To combat this you can adjust the margin to account for the border.
如果您的元素占据整个宽度，则所选答案会中断，因为边框增加了 1px 太多！为了解决这个问题，您可以调整边距以考虑边界。
.line-right {
margin-right: -1px;
border-right: 1px solid black;
}
If you'd like a bigger border, just be sure to account for it in the margin!
如果您想要更大的边框，请务必在边距中考虑它！
回答by Yuval
You can always use an HTML <hr>tag.
您始终可以使用 HTML<hr>标记。
