1

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

所以我编码了这个

如果您在此处输入，查看结果会更清楚

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 不同并且垂直居中。

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

如果您需要更多信息，请告诉我，我将编辑帖子。

4

3 回答 3

2

您需要摆弄 Bootstrap 边距。默认的 Bootstrap 样式为元素添加margin-left20px 的a ，表示显示为：[class*="span"]

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

为了直接在这些边距之间获得边界，您需要有点hacky，并在the.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/

于 2013-05-19T11:01:54.003 回答
1

最好的解决方案是创建一个像素高度的背景图像并将其分配给包含 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;
}

不要忘记删除您的边框

于 2013-05-19T11:02:40.287 回答
1

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

代码：

.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/

于 2013-05-21T13:46:06.193 回答