在 Twitter Bootstrap 装订线中放置垂直线的最佳方法

<div class="row-fluid">

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

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

</div>

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

该线不是列的完整长度 - 所以我不能只使用边框。

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

有任何想法吗 ？

如果您可以假设正在使用现代浏览器（支持 CSS 3 的浏览器），则可以使用 box-sizing 属性（http://www.w3schools.com/cssref/css3_pr_box-sizing.asp 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 http://bootply.com/66990#