将引导卡类划分为3个相同大小的水平盒和2个垂直框

Question

我使用的是引导程序4，我有下面的引导代码块：

<div class="card-body text-success">

</div>

我需要创建一个图片库:3个相同大小的水平框和2个垂直框，因此我尝试了以下代码：

<div class="card-body text-success">
    <div class="row">
        <div class="col-4">
            Your text
        </div>
        <div class="col-4">
            Your text
        </div>
        <div class="col-4">
            Your text
        </div>
    </div>
    <div class="row">
        <div class="col-4">
            Your text
        </div>
        <div class="col-4">
            Your text
        </div>
        <div class="col-4">
            Your text
        </div>
    </div>
</div>

但是这会在图像之间产生一些空间。我需要图像之间没有任何空间。我能做些什么才能做到这一点？

Answer 1

试着这样做：

​

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card-group flex-wrap">
  <div class="card border-0">
    <img class="card-img-top" src="https://cdn.pixabay.com/photo/2020/10/03/14/54/rock-formations-5623735__340.jpg" alt="Card image cap">
  </div>
  <div class="card border-0">
    <img class="card-img-top" src="https://cdn.pixabay.com/photo/2020/10/03/14/54/rock-formations-5623735__340.jpg" alt="Card image cap">
  </div>
  <div class="card border-0">
    <img class="card-img-top" src="https://cdn.pixabay.com/photo/2020/10/03/14/54/rock-formations-5623735__340.jpg" alt="Card image cap">
  </div>
</div>
<div class="card-group flex-wrap">
  <div class="card border-0">
    <img class="card-img-top" src="https://cdn.pixabay.com/photo/2020/10/03/14/54/rock-formations-5623735__340.jpg" alt="Card image cap">
  </div>
  <div class="card border-0">
    <img class="card-img-top" src="https://cdn.pixabay.com/photo/2020/10/03/14/54/rock-formations-5623735__340.jpg" alt="Card image cap">
  </div>
  <div class="card border-0">
    <!-- this is empty space -->
  </div>
</div>

​

Answer 2

CSS

.borders{
  border: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

<div class="card-group">
    <img class="card-img-top card borders" src="https://source.unsplash.com/random/200x200">
    <img class="card-img-top card borders"  src="https://source.unsplash.com/random/200x200">
    <img class="card-img-top card borders"  src="https://source.unsplash.com/random/200x200">
</div>

<div class="card-group">
    <img class="card-img-top card borders" src="https://source.unsplash.com/random/200x200">
    <img class="card-img-top card borders"  src="https://source.unsplash.com/random/200x200">
    <img class="card-img-top card borders"  src="https://source.unsplash.com/random/200x200">
</div>

预览屏幕短

Answer 3

你也可以考虑用简单的CSS来做你的图库。女巫使HTML变得更好：

​

.gallery {
  width: 600px;
  display: grid;
  grid-template-columns: auto auto auto;
  grid-template-rows: auto auto;
  grid-gap: 0;
}
.gallery > * {
  width: 200px;
}

<div class="gallery">
    <img src="https://source.unsplash.com/random/200x200?1" alt="">
    <img src="https://source.unsplash.com/random/200x200?2" alt="">
    <img src="https://source.unsplash.com/random/200x200?3" alt="">
    <img src="https://source.unsplash.com/random/200x200?4" alt="">
    <img src="https://source.unsplash.com/random/200x200?5" alt="">
    <img src="https://source.unsplash.com/random/200x200?6" alt="">
</div>

​