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

jhkqcmku 于 2023-02-06 发布在 Bootstrap

关注(0)|答案(2)|浏览(257)

- bounty将在6天后过期**。回答此问题可获得+100声望奖励。Federico Dorato希望引起更多人关注此问题。

我想在页面中插入一些元素。这些元素可以是"小"或"大"。

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

因此，"big"元素可以是大的col-4、col-8或col-12，这取决于它的位置。

我在SO上发现的最相似的问题如下：Bootstrap fill remaining 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/
那么，我如何给"big"元素分配同一个类，以使最终结果看起来像示例中描述的那样呢？

css

来源：https://stackoverflow.com/questions/75322410/how-can-i-make-a-bootstrap-grid-column-fill-the-whole-remaining-row

2条答案

按热度按时间

ztmd8pv51#

在尝试了多种可能的配置（flex、grid、float等）之后，我想出了如何按要求完成它（"big"元素具有相同的类）：

HTML：

<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：

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

.big {
  background: yellow; 
}

最后一句话：由于这是一个 * 非显而易见的任务 *，我建议您使用原生CSS来完成它，而不是在BS类中挣扎许多天。
问候

赞(0）回复(0）举报 2023-02-06

fsi0uk1n2#

在Bootstrap中，可以使用col-auto类使网格列填充行中的剩余空间。col-auto类设置列的宽度以根据可用空间自动调整。
下面是一个例子：

<div class="container">
  <div class="row">
    <div class="col-8">
      <!-- your content here -->
    </div>
    <div class="col-4">
      <!-- your content here -->
    </div>
  </div>
</div>

在本例中，第一列将占用12个可用网格列中的8个，第二列将占用剩余的4个列。
如果要让第二列填充剩余的空间，可以将第二列上的类从col-4更改为col-auto：

<div class="container">
  <div class="row">
    <div class="col-8">
      <!-- your content here -->
    </div>
    <div class="col-auto">
      <!-- your content here -->
    </div>
  </div>
</div>

通过此更改，第二列现在将自动调整其宽度以填充行中的剩余空间。

赞(0）回复(0）举报 2023-02-06

我来回答

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

2条答案

HTML：

CSS：

相关问题

热门标签

最新问答