Question

我正在使用twitter-bootstrap框架，我试图在三个span4之间放置一个垂直分隔符。

所以我编码this

如果您输入here

，则可以更清楚地看到结果

CSS

.span4 {
    border-right: 2px solid red;
    background: grey;
    text-align: center;
    height: 400px;
    color: white;
}
.span4:last-child {
    border-right: none;
}

HTML

<div class="container">
    <div class="row-fluid">
        <div class="span4">Hello</div>
        <div class="span4">Stack</div>
        <div class="span4">Overflow</div>
    </div>
</div>

正如您所看到的那样，边界位于跨度的末尾，但不在其中间... 我还希望这条线的长度不同于span4和垂直居中。

任何建议或提示都将不胜感激。

如果您需要更多信息，请与我们联系，我会修改帖子。

Answer 1

你需要摆弄Bootstrap边距。默认的Bootstrap样式会将margin-left个20px添加到[class*="span"]元素，这意味着显示为：

[margin][element] [margin][element] [margin][element]

为了在这些边距之间直接获得边框，您需要有点hacky并在.span4和其中的内容之间引入新的分隔符。

   <div class="span4">
        <div class="inner">
            Hello
        </div>
    </div>
    <div class="span4">
        <div class="inner">
            Stack
        </div>
    </div>

.row-fluid .span4 {
    border-right: 2px solid red;
    height: 400px;
    margin:0;
}
.span4:last-child {
    border-right: none;
}
.inner {
    margin:0 10px 0 10px;
    text-align: center;
    color: white;
    background: grey;
    height:100%;
}

这是一个非常粗略的模拟：http://jsfiddle.net/V6qGM/5/

Answer 2

最佳解决方案是创建一个像素高度的背景图像，并将其分配给包含div并使其重复y。不过我想出了这个：

.span4 {
    position: relative;
}
.span4:first-child::after {
    content: "";
}
.span4::after {
    border-left: 1px solid red;
    content: " ";
    display: block;
    width: 1px;
    position: absolute;
    top: 0;
    right: 384px;
    bottom: 0;
}

别忘了删除边框

Answer 3

更好的方法是使用第一个孩子，因为IE不支持last-child。所以..这是詹姆斯修改过的代码：

<强> CODE：

.row-fluid .span4 {
    border-left: 2px solid red;
    height: 400px;
    margin:0;
}
.span4:first-child {
    border-left: none;
}
.inner {
    margin:0 10px 0 10px;
    text-align: center;
    color: white;
    background: grey;
    height:100%;
}

<强>样本 http://jsfiddle.net/V6qGM/40/

如何在span4中间放置一个垂直分隔符？

3 个答案: