BoxSizing屬性不能按預期方式與Bootstrap列一起工作

我正在使用Twitter的Bootstrap佈局響應站點。我在.container div內並列兩列。我想在容器的每一邊添加邊框。當我這樣做時，第二列被推到第一列的下面。BoxSizing屬性不能按預期方式與Bootstrap列一起工作

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

來源

2013-04-05 chrx

你能否加入一些代碼？你的jsfiddle幾乎沒有幫助。這兩列顯然不是50％的寬度，也不是內聯塊。 – 2013-04-05 23:30:03

刪除邊框，你會看到正確佈置的列。 bootstrap-combined.min.css包含在jsfiddle中。 – chrx 2013-04-05 23:41:36

不適合我。 – 2013-04-06 00:18:55

如果你能排液住，這裏有一個乾淨的解決方案：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-06 01:34:35

原因是因爲您已將margin-left分別放在兩列中。立即解決此問題可解決問題。

但是，這會導致邊框和內容之間的間距出現問題;因此，我們添加填充：

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

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

注意：本margin-left似乎被引導加入。

來源

2013-04-06 02:23:39

BoxSizing屬性不能按預期方式與Bootstrap列一起工作

回答

相關問題