Bootstrap 4 拉伸列的背景以在没有容器流体的情况下填充屏幕宽度并与网格保持对齐

如何解决Bootstrap 4 拉伸列的背景以在没有容器流体的情况下填充屏幕宽度并与网格保持对齐

我目前正在建立一个设计并偶然发现了这个问题，我似乎无法找到一个“漂亮”的解决方案。

如果您查看下图，您会看到 3 行，其中一个有两列。列后面的红色代表引导容器。 （绿色框的顶部和底部边框为紫色。我现在看到它们看起来是红色的 - 它们不是）

通常，如果我想要一个“全宽”背景容器，我会将它包装在一个“div”中，然后根据需要具有背景颜色或图像 - 这被描述为 green 带有紫色轮廓的框 - 没什么特别的。

现在，我想要一些相同的东西，只是容器内的两列。 （黄色和蓝色）。我需要将列以及内容与其余的网页网格对齐，但背景要延伸到屏幕边缘（黄色/第 1 列向左延伸，蓝色/第 2 列向右延伸）。>

伪代码/类

<div class="my-full-width-background">
        <div class="container">
            <div class="row">
                <div class="col">
                    <h1>I'm have a full width background!</h1>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-8">
                <!-- This would go all the way to the edge of the screen on left side -->
                <div class="background-image go-to-edge left"></div>
                <div class="text-content">
                    <h2>This text would be aligned to the other containers col's</h2>
                </div>
            </div>
            <div class="col-md-4">
                <div class="background-color go-to-edge right"></div>
                <div class="text-content">
                    <h2>This text is still within grid as well. Although the background color goes all the way
                    out of the grid and to the right screen edge.</h2>
                </div>
            </div>
        </div>
    </div>

我尝试过使用“容器流体”，但发现列的对齐方式与普通容器的对齐方式不匹配。

我一直在尝试在 cols 中制作伪元素，使用绝对定位的背景和计算的偏移量 - 这似乎不是一个很好的解决方案。

我在这里错过了一些完全简单的东西吗？或者您有任何想法或可能的更清洁的解决方案吗？

提前致谢