0

我正在使用 Twitter 的 Bootstrap 来布置一个响应式网站。.container我在一个div内并排有两列。我想在容器的每一侧添加一个边框。当我这样做时，第二列被推到第一列之下。

.row {
    border-left: 1px solid red;
    border-right: 1px solid red;
}

我想我可以用 CSS 属性纠正这个问题，box-sizing将 div 的边框合并到它的宽度中。但是，它不起作用。

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

任何想法为什么？如何在不破解 Bootstrap 文件的情况下在每一侧添加边框？

代码：http: //jsfiddle.net/huV7A/13/

编辑：我正在尝试实现这一点，但在列外部有边框：http: //jsfiddle.net/huV7A/12/

4

2 回答 2

1

如果您可以使用 row-fluid，这里有一个干净的解决方案：http: //jsfiddle.net/panchroma/S7pLe/

CSS 

.row-fluid{
border-left:1px solid red;
border-right:1px solid red;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;         /* Opera/IE 8+ */
}
于 2013-04-06T01:34:35.803 回答
0

原因是因为您已放置margin-left在两列中的每一列上。删除它可以立即解决问题。

但是，这会导致边框和内容之间的间距出现问题；因此我们添加了填充：

.span6 {
    margin-left: 0;
    padding-left: 20px;
}

http://jsfiddle.net/huV7A/14/

注意：这margin-left似乎是由 Bootstrap 添加的。

于 2013-04-06T02:23:39.093 回答