如何用Col-12将三张照片col-4在一张图片下面放置？

发布于 2025-02-08 17:09:29 字数 1182 浏览 2 评论 0原文

我在Bootstrap 5网格上遇到了麻烦。基本上，我想拥有一个带有Col-12和600px的完整图像，以最大宽度为100％，并放置三个图像，每张200px使用Col-4，因此我在顶部得到一个图像，并在其下面获得三张图像G-3用于三个图像之间的间距。因此，我为每个图像创建了一个带有img-fluid的一个容器，为每个图像创建了两个分开的行

这也是我正在编写的代码

 <div class="container text-center pt-5">
  <div class="row">
    <div class="col-12"><img class="img-fluid pb-2" src="./images/01.jpg" alt=""></div>
  </div>
  <div class="row g-3">
    <div class="col-4"><img class="img-fluid " src="./images/02.jpg" alt=""></div>
    <div class="col-4"><img class="img-fluid " src="./images/03.jpg" alt=""></div>
    <div class="col-4"><img class="img-fluid " src="./images/04.jpg" alt=""></div>
  </div>
</div>

，这是我想要的最终结果。

我确实回到了Bootstrap 5文档，并复制并经过相同的结构，但我仍然得到相同的结果，请帮助

原文

I'm having trouble with the bootstrap 5 grid. Basically, I want to have one full image with a col-12 and 600px to take a max width of 100% and to place three images, each 200px with a col-4, so I get one image on top and three beneath it with g-3 for spacing between the three images. So I created two seperated rows under one container with img-fluid for each image so the image takes the full width but the problem is that the 3 images are not fitting the right way please have a look

also this is my code that i am writing

 <div class="container text-center pt-5">
  <div class="row">
    <div class="col-12"><img class="img-fluid pb-2" src="./images/01.jpg" alt=""></div>
  </div>
  <div class="row g-3">
    <div class="col-4"><img class="img-fluid " src="./images/02.jpg" alt=""></div>
    <div class="col-4"><img class="img-fluid " src="./images/03.jpg" alt=""></div>
    <div class="col-4"><img class="img-fluid " src="./images/04.jpg" alt=""></div>
  </div>
</div>

and that's the end outcome I'm looking for.

I did get back to bootstrap 5 documentation and did copy and past same structure but i am still getting the same result please help

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

你げ笑在眉眼 2025-02-15 17:09:29

尝试将容器 - 流体用于容器

 <div class="container-fluid text-center pt-5">
  <div class="row">
    <div class="col-12"><img class="img-fluid pb-2" src="./images/01.jpg" alt=""></div>
  </div>
  <div class="row g-3">
    <div class="col-4"><img class="img-fluid " src="./images/02.jpg" alt=""></div>
    <div class="col-4"><img class="img-fluid " src="./images/03.jpg" alt=""></div>
    <div class="col-4"><img class="img-fluid " src="./images/04.jpg" alt=""></div>
  </div>
</div>

Try to use the container-fluid for container

 <div class="container-fluid text-center pt-5">
  <div class="row">
    <div class="col-12"><img class="img-fluid pb-2" src="./images/01.jpg" alt=""></div>
  </div>
  <div class="row g-3">
    <div class="col-4"><img class="img-fluid " src="./images/02.jpg" alt=""></div>
    <div class="col-4"><img class="img-fluid " src="./images/03.jpg" alt=""></div>
    <div class="col-4"><img class="img-fluid " src="./images/04.jpg" alt=""></div>
  </div>
</div>

回复收藏 0 原文

过期情话 2025-02-15 17:09:29

因此，基本上，我需要提供容器尺寸，因此我添加了一个名为“容器盒”的类，并给它宽度为600 PX，从而导致以下代码。

<div class="container container-box text-center pt-5">
  <style>.container-box{
    width: 600px;
 }</style>
  <div class="row">
    <div class="col-12"><img width="600" class="img-fluid pb-2" src="./images/01.jpg" alt=""></div>
  </div>
  <div class="row g-3">
    <div class="col-4"><img width="200" class="img-fluid " src="./images/02.jpg" alt=""></div>
    <div class="col-4"><img width="200" class="img-fluid " src="./images/03.jpg" alt=""></div>
    <div class="col-4"><img width="200" class="img-fluid " src="./images/04.jpg" alt=""></div>
  </div>
</div>

So, basically, I needed to provide the container size, so I added a class called container-box and gave it a width of 600 px, resulting in the following code.

<div class="container container-box text-center pt-5">
  <style>.container-box{
    width: 600px;
 }</style>
  <div class="row">
    <div class="col-12"><img width="600" class="img-fluid pb-2" src="./images/01.jpg" alt=""></div>
  </div>
  <div class="row g-3">
    <div class="col-4"><img width="200" class="img-fluid " src="./images/02.jpg" alt=""></div>
    <div class="col-4"><img width="200" class="img-fluid " src="./images/03.jpg" alt=""></div>
    <div class="col-4"><img width="200" class="img-fluid " src="./images/04.jpg" alt=""></div>
  </div>
</div>

回复收藏 0 原文

~没有更多了~