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

Question

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

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

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

现在，我想有点相同，只是容器内的两列。（黄色和蓝色）。我需要列以及内容与其余网页网格对齐，但背景要延伸到屏幕边缘（黄色/第 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 中制作伪元素，具有绝对定位的背景和计算的偏移量 - 它似乎并不是一个很好的解决方案。

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

提前致谢

标签： htmlcsslayoutbootstrap-4bootstrap-grid