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

Question

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

但是我在使用容器时遇到了麻烦。我知道我可以使用容器流体，但为了保持布局一致，我想使用容器来解决这个问题。因为当我使用 container-fluid 时，边距会关闭，并且没有像我想要的那样整齐排列。

在此先感谢，如果不弄乱布局，我似乎无法弄清楚。

编辑 1

添加代码是我的错误；赫比我的代码：

<div class="container">
            <div class="row">
                <section class="col pt-5">
                    <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">
                    <img class="img-fluid w-100" src="~/images/barn-images-t5YUoHW6zRo-unsplash.jpg"  />
                </section>
            </div>
        </div>

Answer 1

根据this 的解释，我实现了我想要的。这是关于打破引导容器。通过反转使用的计算，我知道要使用哪些属性。我已经为自己画了出来，并得出了正确的计算方法。这是我使用的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，我使用了以下内容：

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

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

Answer 2

编辑

在带有row 类名的 div 上，您可以使用d-flex

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container bg-secondary">
  <div class="row p-2">
    <section class="col pt-5 border border-white">
      <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>
    <!-- d-flex and align-items-center is to display flexbox and vertically align child items to center-->
    <section class="col d-flex align-items-center border border-white">
      <!--If you're using latest version of bootstrap use ms-auto and d-block, if not, use ml-auto.
      You have to make your image smaller than your container, if w-100 then it takes width: 100%-->
      <img class="img-fluid w-75 bg-dark d-block h-75 ms-auto" src="~/images/barn-images-t5YUoHW6zRo-unsplash.jpg"/>
    </section>
  </div>
</div>