Question

我正在使用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/

Answer 1

如果你能使用排液，这里有一个干净的解决方案：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+ */
}

Answer 2

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

但是，这会导致边框与内容之间的间隔出现问题;因此我们添加填充：

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

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

注意：Bootstrap似乎添加了margin-left。

Box-sizing属性与Bootstrap列无法正常工作

2 个答案: