如何使 Bootstrap 网格列填充整个剩余行？

Question

我收到一些元素，并且想在页面中插入一些元素。这些元素可以是“小”或“大”。我无法提前知道我将收到多少元素或它们的顺序。

• 如果它们是“小”，我希望它们是大的col-4。
• 如果它们“大”，我希望它们从前一个元素到行尾尽可能大。

因此，“大”元素可以很大col-4，col-8或者col-12取决于它的位置。在一张图片中：

我在 SO 上发现的最相似的问题如下：Bootstrap fill left columns

我尝试使用问题中建议的方法，但它不涵盖在同一行中“大”元素后面有一个“小”元素的情况。使用链接问题中的相同词语：

它不包括在同一行中，流氓元素后面有一个蓝色元素的情况

.col-4{
  background:red;
}

.big{
 background:yellow; 
}

.row{
  background:white;
}

 

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

<h1>
Expected result
</h1>
The goal is to obtain this same behaviour using the same style for every "big" element

<div class="container-fluid pt-2">
  <div class="row">
    <div class="col-4 mb-1">
      small
    </div>
    <div class="col-4  mb-1">
      small
    </div>
    <div class="col-4  mb-1">
      small
    </div>
    <div class="col-12 big mb-1">
      big
    </div>
    <div class="col-4   mb-1">
      small
    </div>
    <div class="col-4  mb-1">
      small
    </div>


    <div class="col-4 big mb-1">
      big
    </div>
    <div class="col-4  mb-1">
      small
    </div>
    <div class="col-8 big mb-1">
      big
    </div>
    <div class="col-4  mb-1">
      small
    </div>
    

  </div>
</div>

<h1>
Not working attemp 1 (don't use any col)
</h1>
Issue: The "big" elements start on a new row instead of filling the previous row.

<div class="container-fluid pt-2">
  <div class="row">
    <div class="col-4 mb-1">
      small
    </div>
    <div class="col-4  mb-1">
      small
    </div>
    <div class="col-4  mb-1">
      small
    </div>
    <div class="big mb-1">
      big
    </div>
    <div class="col-4   mb-1">
      small
    </div>
    <div class="col-4  mb-1">
      small
    </div>
    <div class="big mb-1">
      big
    </div>
    <div class="col-4  mb-1">
      small
    </div>
    <div class="big mb-1">
      big
    </div>
    <div class="col-4  mb-1">
      small
    </div>

  </div>
</div>


<h1>
Not working attemp 2 (use only "col")
</h1>
Issue: Instead of occupying a whole row, the "big" elements shrink to make space for the next elements

<div class="container-fluid pt-2">
  <div class="row">
    <div class="col-4 mb-1">
      small
    </div>
    <div class="col-4  mb-1">
      small
    </div>
    <div class="col-4  mb-1">
      small
    </div>
    <div class="col big mb-1">
      big
    </div>
    <div class="col-4   mb-1">
      small
    </div>
    <div class="col-4  mb-1">
      small
    </div>
    <div class="col big mb-1">
      big
    </div>
    <div class="col-4  mb-1">
      small
    </div>
    <div class="col big mb-1">
      big
    </div>
    <div class="col-4  mb-1">
      small
    </div>

  </div>
</div>

https://jsfiddle.net/bhLq86o4/

那么，如何为“大”元素分配相同的类，以便最终结果看起来像示例中描述的那样？

Answer 1

在尝试了多种可能的配置（flex、grid、float 等）之后，我弄清楚了如何按照要求做到这一点（“大”元素具有相同的类）：

代码：

.small {
  width: 33.3%;
  float: left;
  background: red;
}

.big {
  background: yellow; 
}

<h1>
  Expected result
</h1>
The goal is to obtain this same behaviour using the same style for every "big" element

<div>
  <div class="small">
    small
  </div>
  <div class="small">
    small
  </div>
  <div class="small">
    small
  </div>
  <div class="big">
    big
  </div>
  <div class="small">
    small
  </div>
  <div class="small">
    small
  </div>


  <div class="big">
    big
  </div>
  <div class="small">
    small
  </div>
  <div class="big">
    big
  </div>
  <div class="small">
    small
  </div>
</div>

最后几句话：由于这是一项非显而易见的任务，我建议您使用原生 CSS 来完成它，而不是在 BS 课程中挣扎很多天。

问候