我一直在我的企業網站上工作,過去一週和昨天我遇到了問題,我找不到解決方案。左側和右側容器邊框不一樣
正如你所看到的,左邊框比右邊框的區別,我想basicly邊框,看起來相同的兩邊(左&右)。
我已經嘗試了所有我可能會想到的,我試圖給右側的填充,以檢查邊框是否隱藏在另一個容器後面。
我也嘗試在所有內容容器上製作邊框,但這也不起作用。
一個智者曾經說過,一張圖片勝過超過1000個字以上,所以這裏是解釋相當不錯的什麼,我會apreciate圖片,得到一些幫助:)
我一直在我的企業網站上工作,過去一週和昨天我遇到了問題,我找不到解決方案。左側和右側容器邊框不一樣
正如你所看到的,左邊框比右邊框的區別,我想basicly邊框,看起來相同的兩邊(左&右)。
我已經嘗試了所有我可能會想到的,我試圖給右側的填充,以檢查邊框是否隱藏在另一個容器後面。
我也嘗試在所有內容容器上製作邊框,但這也不起作用。
一個智者曾經說過,一張圖片勝過超過1000個字以上,所以這裏是解釋相當不錯的什麼,我會apreciate圖片,得到一些幫助:)
問題是因爲你的DOM結構:
<body>
<div class="container second">
<div class="container">
...
當你注意到你有兩個嵌套container
秒。如果您查看容器的css,則會看到它的屬性width: 1200px
,其中包含任何可能的邊界。由於外部div
的邊界爲1px
,這意味着內部的div
將有2個像素可供使用,並且實際大小應爲1198px
。
爲了解決這個問題,你可以改變靜態寬度,但是我建議不要嵌套container
s,因爲我不認爲這是它的目的。
編輯:爲了讓所有不同顯示尺寸的工作,你可以添加:
@media (min-width:768px) {
.second {
width: 752px;
}
}
@media (min-width:992px) {
.second {
width: 972px;
}
}
@media (min-width:1200px) {
.second {
width: 1202px;
}
}
這個寬度增加了第一個div:
<body id="page-top">
<div class="container second" style="width: 972px;">
我還沒有想出的原因但bootstrap的容器是:
.container {
width: 970px;
}
和嵌套容器(或邊緣)受到影響。
我在我的回答中描述了原因。我們有不同的'寬度',但這是因爲引導'@ media'查詢(例如,它們爲3種不同大小定義容器寬度:小型,中型和大型設備) – pingul
你的代碼會有幫助:) –
實際上看看你的鏈接(網站),看起來很好,沒有問題。 – divy3993