超出屏幕末端的引导列

Question

这是我在这里的第一篇文章。我正试着做这样的事情：https://bravepeople.co其中列中的最后一个图像离屏幕有一半。然而，我很难弄清楚如何使用Bootstrap。

这是我的代码：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-beta3/css/bootstrap.min.css" integrity="sha512-N415hCJJdJx+1UBfULt+i+ihvOn42V/kOjOpp1UTh4CZ70Hx5bDlKryWaqEKfY/8EYOu/C2MuyaluJryK1Lb5Q==" crossorigin="anonymous" />

<div class="container-md">
<div class="row">
<div class="col-lg-4 col-md-4 col-sm-12">
<h2>Title!</h2>
<p>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem
accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab
illo inventore veritatis et quasi architecto beatae vitae dicta sunt
explicabo.
</p>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<img src="https://via.placeholder.com/354x580" height="580px" width="354px" />
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<img src="https://via.placeholder.com/354x580" height="580px" width="354px" />
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<img src="https://via.placeholder.com/354x580" height="580px" width="354px" />
</div>
</div>
</div>

如何添加另一列，但在屏幕的最后将其截断？感谢

Answer 1

就我个人而言，我会通过将包含div的图像定位为absolute或fixed，将其从正常流中删除。

我制作了主父容器position:relative，并将所有图像包装在容器div中，容器div相对于父容器是position:absolute。您现在可以使用px or %单元轻松定位图像。

由于div使用了绝对定位，因此它不再是正常文档流的一部分，将被绘制在另一层中。因此，不会导致任何意外的溢出或内容包装。

.img-container {
right: -45px;
top: 10%;
}
.img-container_image {
object-fit: cover;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<main>
<section class="row position-relative vw-100 vh-100 m-0 p-0 bg-dark">
<div class="d-flex flex-column justify-content-center text-light">
Lorem Ipsum
</div>
<aside class="row flex-nowrap p-0 position-absolute img-container col-8 h-50">
<div class="bg-secondary col-4 p-0 ms-1">
<img class="width-100 h-100 img-container_image "/>
</div>
<div class="bg-primary col-4 p-0 ms-1">
<img class="width-100 h-100 img-container_image "/>
</div>
<div class="bg-success col-4 p-0 ms-1">
<img class="width-100 h-100 img-container_image "/>
</div>
</aside>
</section>
</main>