Javascript 如何使网格内的div延伸到网格之外？

我有一个容器，有一个12列的网格，网格系统左右各有30像素的边距

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

我需要你帮我怎么做？我无法从网格中删除蓝色div

我曾尝试将blue div的宽度设置为100vw，将边距设置为-30px，这很有效，但在开发工具的不同条件下，我会遇到一些奇怪的问题，尽管如此，我还是希望避免使用vw。请帮助我。

使用负边距：

例如：

---

不要设置宽度

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

我宁愿使用绝对定位

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

---

对网格父类使用负边距。此边距应与排水沟空间相同。就像下面的片段

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

.行{
左边距：-30px；
右边距：-30px；
}
.row>.grid-8{
宽度：60%；
填充：0 30px；
}
.row>.grid-4{
宽度：40%；
填充：0 30px；
}

所以我的属性将变成：网格列1到8左边距-30px右边距-30px？蓝色分区的宽度是100%.当你设置一个固定的宽度时，会出现负边距的问题，如果我理解你的问题，蓝色分区上没有宽度，它只是从第1-8列开始。现在我加上了-30的左右边距和它的完美。。这是一个好的做法吗？我以后会遇到麻烦吗？我正在尝试制作一个响应页面。网格的左右边距总是30px，所以我可以这样做吗？一点也不麻烦，你只是在补偿一个外部填充。如果您想删除某些响应断点处的边距，只需在响应设置中进行修复。在许多网格系统中，您会发现包含列的行元素具有负边距，例如检查第81行，这样做会破坏该页面中的其他内容。我周围有更多的元素，绝对定位使其适合视口，但页面的总体布局正在改变。ve利润率会导致什么问题？我将始终将网格的左右边距固定为30px，如果我将网格中div的边距设置为每边-30px，在任何情况下都会发生什么？我假设您想要全屏宽度，如蓝色div所示。这取决于你的HTML代码。如果你看不到有“可怕”的行为发生，你可以使用负的边距。它们可能会移动周围的div，如果出现这种情况，通常很难调试问题。如果你不喜欢负边距，你可以像我有时做的那样复制蓝色div，然后根据视口宽度交替隐藏/显示它们。即，在768px及以下，蓝色div不在12列网格内：（引导解决方案）

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