如何消除引导网格中的列和行间隔？

Question

在网格布局中，图像无法覆盖整个单元格。尝试填充图像，填充div部分，以及网格间隙，它们都被正确地设置为0px。我只想让那些奇怪的填充物消失(用蓝色标记)。

Bootstrap 5 .g-0类确实移除列间的沟槽，但不移除行间的沟槽。

我当前网页的截图：

​

​

​

.ai {
  width: 100%;
  height: 100%;
  padding: 0px;
}

.algo {
  padding: 0px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="container-fluid added-by-community">
  <div class="row added-by-community">
    <div class="col-sm-6 col-lg-4 col-md-4 col-xl-4 col-xxl-4 algo bg-primary">
      <figure>
        <img class="img-fluid ai" src="https://via.placeholder.com/600x200" />
      </figure>
    </div>
    
    <div class="col-sm-6 col-lg-4 col-md-4 col-xl-4 col-xxl-4 algo bg-primary">
      <figure>
        <img class="img-fluid ai" src="https://via.placeholder.com/600x200" />
      </figure>
    </div>
    
    <div class="col-sm-6 col-lg-4 col-md-4 col-xl-4 col-xxl-4 algo bg-primary">
      <figure>
        <img class="img-fluid ai" src="https://via.placeholder.com/600x200" />
      </figure>
    </div>
    
    <div class="col-sm-6 col-lg-4 col-md-4 col-xl-4 col-xxl-4 algo bg-primary">
      <figure>
        <img class="img-fluid ai" src="https://via.placeholder.com/600x200" />
      </figure>
    </div>
    
    <div class="col-sm-6 col-lg-4 col-md-4 col-xl-4 col-xxl-4 algo bg-primary">
      <figure>
        <img class="img-fluid ai" src="https://via.placeholder.com/600x200" />
      </figure>
    </div>
    
    <div class="col-sm-6 col-lg-4 col-md-4 col-xl-4 col-xxl-4 algo bg-primary">
      <figure>
        <img class="img-fluid ai" src="https://via.placeholder.com/600x200" />
      </figure>
    </div>
  </div>
</div>

​

Answer 1

我通常不喜欢在本地级别乱搞网格(只作为全局覆盖)。相反，按照计划使用网格并修改内容，例如，用负边距来否定网格间距。

更好的是，不要使用行和列。使用基本的挠曲箱。这里，我用一个自定义类扩展了Bootstrap的规模公用设施，这个类的宽度比md 断点高1/3。我也使用m-0对数字，以消除他们的底差。

​

@media (min-width: 768px) {
  body .w-md-33 {
    width: calc(100% / 3) !important;
  }
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">

<div class="d-flex flex-wrap">

  <div class="w-50 w-md-33 algo bg-primary">
    <figure class="m-0">
      <img class="img-fluid ai" src="https://via.placeholder.com/800x300" />
    </figure>
  </div>

  <div class="w-50 w-md-33 algo bg-primary">
    <figure class="m-0">
      <img class="img-fluid ai" src="https://via.placeholder.com/800x300" />
    </figure>
  </div>

  <div class="w-50 w-md-33 algo bg-primary">
    <figure class="m-0">
      <img class="img-fluid ai" src="https://via.placeholder.com/800x300" />
    </figure>
  </div>

  <div class="w-50 w-md-33 algo bg-primary">
    <figure class="m-0">
      <img class="img-fluid ai" src="https://via.placeholder.com/800x300" />
    </figure>
  </div>

  <div class="w-50 w-md-33 algo bg-primary">
    <figure class="m-0">
      <img class="img-fluid ai" src="https://via.placeholder.com/800x300" />
    </figure>
  </div>

  <div class="w-50 w-md-33 algo bg-primary">
    <figure class="m-0">
      <img class="img-fluid ai" src="https://via.placeholder.com/800x300" />
    </figure>
  </div>

</div>

​