Question

过去一周，我一直在我的商业网站上工作，昨天我遇到了一个问题，我无法找到解决方案。

正如您所看到的，左边框与右边框不同，我基本上希望边框看起来两边都是相同的（左边和右边）。

我已经尝试了一些我能想到的东西，我试图在右侧给出填充物，然后检查＆＃34;如果边框藏在另一个容器后面。

我还尝试在所有内容容器上制作边框，但这也不起作用。

一位智者曾经说过，一张照片说的超过1000个字，所以这里有一张图片，它解释了我会擅长什么，以获得一些帮助：）

Answer 1

问题在于你的DOM结构：

<body>
    <div class="container second">
        <div class="container">
...

正如您所注意到的，您有两个嵌套的container。如果您查看容器的css，您会看到它具有属性width: 1200px，其中包含任何可能的边框。由于外部div的边框为1px，这意味着内部div将减少2个像素，而真实尺寸应为1198px。

要解决这个问题，你可以改变静态宽度，但我建议不要嵌套container，因为我不认为这是它的目的。

编辑：要使其适用于所有不同的显示尺寸，您可以添加：

@media (min-width:768px) {
    .second {
        width: 752px;
    }
}

@media (min-width:992px) {
    .second {
        width: 972px;
    }
}

@media (min-width:1200px) {
    .second {
        width: 1202px;
    }
}

Answer 2

将此宽度添加到第一个div：

<body id="page-top">
    <div class="container second" style="width: 972px;">

我还没有确切地知道原因，但是bootstrap的容器是：

.container {
    width: 970px;
}

并且嵌套的容器（或边缘）会受到影响。

左侧和右侧容器边界不一样

2 个答案: