css - 在 Twitter Bootstrap 排水沟中放置垂直线的最佳方式

Question

<div class="row-fluid">

    <div class="span6"> Some content </div>

    <div class="span6"> Some content </div>

</div>

我想在这两列之间的间距中间放置一条垂直线。

线条不是列的全长 - 所以我不能只使用边框。

我已经尝试将我的布局更改为 span6、span1、span5 并使用 span1 列作为该行，但它弄乱了我正确内容的空间。

有什么想法吗？

Answer 1

如果您可以假设正在使用现代浏览器(支持 CSS 3 的浏览器)，则可以使用 box-sizing 属性 ( http://www.w3schools.com/cssref/css3_pr_box-sizing.asp ) 覆盖默认的 Bootstrap .span6.

您可能还想将其包含在 @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;
  }
}

Bootply