bootstrap 4中的列调整大小问题 - 使最后一个cols填充行的宽度

Question

您好我遇到了在不同屏幕和数字中维护列的问题。

现在我有 桌面中每行3列 ipad中每行4列 移动中每行2列

现在在桌面我必须调整列宽，如果我有7列 所以我在第1行显示3列，然后在第3行显示第3列，在第3行显示最后第7列，但在最后一列，我需要将其更改为等于3列宽以上。

同样的情况，当我总共有8列时，我会附上图片以获得更多解释

此指南需要：）

码

0     4
1     5
2     6
3     8
4    10
5    12
6    12
7    15
8    18
dtype: int64

Answer 1

这是最近在Bootstrap 4.1.0中添加的flex-grow utility class的一个很好的用例。当行上有更多空间时，使用flex-grow-1和mw-100让cols均匀填充宽度....

<div class="row">
        <div class="col-6 col-md-4 mw-100 flex-grow-1">
            <div class="card bg-info"></div>
        </div>
        ...
</div>

Demo (last cols fill width)

注意：这也可以使用CSS（而不是mw-100 flex-grow-1）来完成：

.row>.col-6 {
    max-width: 100%;
    flex-grow: 1;
}