我如何使网格内的div超出网格？

Question

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

这是768像素处的网格布局更改，请参见占据8列的蓝色div现在如何扩展到8列之外，并覆盖了边距。

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

我曾尝试将blue div的宽度设置为100vw，左边缘的宽度设置为-30px，但是可以，但是在开发工具中，在不同条件下我都遇到了奇怪的问题，尽管如此，我还是想避免使用vw。请帮帮我。

Answer 1

使用负边距：

例如：

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

不设置宽度

Answer 2

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

我宁愿使用绝对定位。

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

Answer 3

对您的父级上课使用负边距。此边距应与装订线空间相同。像下面的代码片段。

<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;
}