在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