Html 如何展开容器中的列，以便图像可以从列的中点展开到页面的右侧？

在bootstrap容器中，我希望将图像扩展到侧面，但保持其余部分不变。使它更易于解释；这就是我目前拥有的：。在图像的右侧有一个间隙。我想将图像延伸到该间隙（绿线）上，但将列的中间部分保持在同一页上（红线）。如图所示：

但我很难用容器实现这一点。我知道我可以使用容器流体，但为了保持布局的一致性，我想在这个问题上使用容器。因为当我使用容器液体时，边缘会脱落，而且不会像我希望的那样干净

提前谢谢，我似乎无法在不弄乱布局的情况下解决这个问题

编辑1

我的坏福格特添加代码；我的代码是：

韦尔科姆比吉酒店
XE设计
轻松租赁家具，白手套交付和组装。目前在纽约、旧金山、洛杉矶、巴尔的摩、里士满和华盛顿地区

编辑 在具有

行

类名的div上，您可以使用

d-flex

韦尔科姆比吉酒店
XE设计

轻松租赁家具，白手套交付和组装。目前在纽约、旧金山、洛杉矶、巴尔的摩、里士满和华盛顿地区！

根据解释，我实现了我想要的。这是关于打破引导容器。通过反转使用的计算，我知道要使用哪些属性。我自己画了出来，得出了正确的计算方法。这是我使用的html：

<div class="container">
            <div class="row">
                <section class="col-md-6 d-flex align-items-center">
                    <div>
                        <h1>Welkom bij</h1>
                        <h1>XE-Designs</h1>
                        <p>Easy furniture rental with white glove delivery & assembly. Currently in NYC, SF, LA, Baltimore, Richmond, and the DC Area!</p>
                    </div>
                </section>

                <section class="col-md-6">
                    <div class="css_break_out">
                        <img class="img-fluid w-100" src="~/images/barn-images-t5YUoHW6zRo-unsplash.jpg" />
                    </div>
                </section>
            </div>
        </div>

---

如果有人在这些css/html中有任何改进，请告诉我，我愿意编辑答案。

我刚刚尝试过，但似乎不起作用；它不会将图像延伸到页面边框。它不会“突破”它的父容器OK，我理解，因为你的图像是全宽的，这是不可能的，如果你想反映这一点，你需要修改你的容器的正确填充，但即使有了这张图像，也会占据100%的宽度，而cols将占据所有可用空间，因此，我建议您按照我的编辑中的方法再次编辑一个完全相同的结果：/ready edited，在我之前的评论中，我解释了为什么会发生这种情况以及您如何解决它。您的回答确实提供了一些见解，但父容器仍然有一个限制。例如，我看到了整个页面，在页面中有一个容器，容器包含一个网格，所以有一个均匀的分隔。在第二个网格中，我想将其扩展到页面bord（因此在容器参数之外）。我看不懂这部分

.css_break_out {
        width: calc((100% + (100vw - 100%) / 2) + 15px);
        position: relative;
        left: calc(-1 * (100vw - 100%) / 2);
    }

    @@media (min-width: 576px) {
        .css_break_out {
            width: calc((100% + (100vw - 100% - 15px)));
            position: relative;
            left: calc(-1 * (100vw - 100% - 15px) / 2);
        }
    }

    @@media (min-width: 768px) {
        .css_break_out {
            width: calc((100% + (100vw - 200%) / 2) - 15px);
            position: relative;
            left: 0;
        }
    }