如何使网格内的 div 超出网格？答案

【问题标题】：How do I make a div inside a grid stretch beyond the grid?如何使网格内的 div 超出网格？
【发布时间】：2020-03-17 04:33:18
【问题描述】：

我有一个容器，有一个 12 列的网格，网格系统的左右边距为 30px

这是 768 px 的网格布局的变化，看看占据 8 列的蓝色 div 现在如何延伸到 8 列之外，也覆盖了边距。

我需要有关如何执行此操作的帮助？我无法将蓝色 div 从网格中移除。

我尝试将蓝色 div 的宽度设置为 100vw 并将左边距设置为 -30px，它可以工作，但我在开发工具的不同条件下遇到了奇怪的问题，但我想避免使用 vw。请帮帮我。

【问题讨论】：

如果你不喜欢负边距，你总是可以做我有时做的事情并复制蓝色 div，然后根据视口宽度交替隐藏/显示它们。 IE。在 768px 及以下，蓝色 div 不在 12 col 网格内：jsfiddle.net/khrismuc/g79fy8p3（引导解决方案）

标签： javascript html css

【解决方案1】：

使用负边距：

例如：

margin-left: -30px;
margin-right: -30px;

不要设置宽度

【讨论】：

所以我的属性将变为：网格列 1 到 8 左边距 -30px 右边距 -30px？虽然蓝色 div 的宽度是 100%..
如果我了解您的问题，当您设置固定宽度时会出现负边距问题
蓝色 div 上没有宽度，它只是从第 1-8 列放置的。现在我添加了-30的左右边距和它的完美..这是一个好习惯吗？我以后会遇到麻烦吗？我正在尝试制作一个响应式页面。网格的左右边距总是 30px，所以我可以这样做吗？
完全没有问题，您只是在补偿外部填充。如果您想在某些响应式断点处删除边距，只需在您的响应式设置中修复它
在许多网格系统中，您会发现包含列的行元素具有负边距，例如在第 81 行检查 github.com/twbs/bootstrap/blob/…

【解决方案2】：

我会避免使用负边距，因为它们会产生新问题。

我宁愿使用绝对定位。

.child-div {
    position:absolute;
    left:0;
    right:0;
}

【讨论】：

这样做会破坏该页面中的其他内容。我周围有更多元素，绝对定位使其适合视口，但页面的整体布局正在发生变化。 -ve 边距会导致什么问题？我将始终将网格的左右边距固定为 30px，如果我将网格中 div 的边距设置为每边 -30px，无论如何会发生什么？
我假设您想要全屏宽度，如蓝色 div 所示。这取决于您的 HTML 代码。如果您没有看到任何“诡异”的操作，您可以使用负边距。他们可能会移动周围的 div，如果发生这种情况，通常很难调试问题。

【解决方案3】：

对您的 gird 父类使用负边距。此边距应与您的装订线空间相同。就像下面的sn-p。

<div class="row">
 <div class="grid-8"></div>
 <div class="grid-4"></div>
</div>

.row{
 margin-left: -30px;
 margin-right: -30px;
}
.row > .grid-8 {
 width: 60%;
 padding:0 30px;
}
.row > .grid-4 {
 width: 40%;
 padding:0 30px;
}

【讨论】：