twitter-bootstrap 在 Twitter Bootstrap 装订线中放置一条垂直线的最佳方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17575193/
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
Best way to put a vertical line in the Twitter Bootstrap gutter
提问by
<div class="row-fluid">
<div class="span6"> Some content </div>
<div class="span6"> Some content </div>
</div>
I want to put a vertical line down the middle of the gutter between these two columns.
我想在这两列之间的排水沟中间放一条垂直线。
The line is not the full length of the columns - so I can't just use a border.
该行不是列的全长 - 所以我不能只使用边框。
I've tried changing my layout to span6, span1, span5 and using the span1 column for the line, but it messes up the space for my right content.
我已经尝试将我的布局更改为 span6、span1、span5 并使用 span1 列作为行，但它弄乱了我正确内容的空间。
Any ideas ?
有任何想法吗 ？
回答by Zim
If you can go with the assumption that a modern browser (one that supports CSS 3) is being used, you can use the box-sizing property (http://www.w3schools.com/cssref/css3_pr_box-sizing.asp) to override the default Bootstrap .span6.
如果您可以假设正在使用现代浏览器（支持 CSS 3 的浏览器），则可以使用 box-sizing 属性（http://www.w3schools.com/cssref/css3_pr_box-sizing.asp）来覆盖默认的 Bootstrap .span6。
You may also want to enclose this in a @media query to avoid strange left-side spacing when the browser is resized to a smaller width..
您可能还想将其包含在 @media 查询中，以避免在将浏览器调整为较小宽度时出现奇怪的左侧间距。
@media (min-width:979px) {
.span6:not(:first-child) {
border-left: 1px solid #ddd;
padding-left: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}
回答by Zim
Thanks for the answers. But the problem was not just a border. The vertical line has to be for only part of the length of the columns.
感谢您的回答。但问题不仅仅是边界。垂直线只能是列长度的一部分。
My solution was to use absolute positioning for the vertical line div & I had to give the span column a position:
我的解决方案是对垂直线 div 使用绝对定位，我必须给 span 列一个位置：
<div class="row-fluid">
<div class="span6"> Some content </div>
<div class="span6" style="position:relative">
<div class="thin_vertical_line" style="position:absolute;left:-15px;height:70%;top:0px;></div>
Some content
</div>
</div>
The only remaining issue is that the -15px left assumes a gutter width (twitter bootstrap puts a left margin on the second span to get the gutter) of a certain dimension & with response twitter bootstrap this can change depending on screen resolution. -15px is safe but won't be quite centered on smaller devices.
唯一剩下的问题是 -15px left 假设一个特定尺寸的装订线宽度（twitter bootstrap 在第二个跨度上放置一个左边距以获得装订线），并且响应 twitter bootstrap 这可以根据屏幕分辨率而改变。-15px 是安全的，但不会完全集中在较小的设备上。
