Twitter Bootstrap 列高变化在列网格中没有间隙？答案

【问题标题】：Twitter Bootstrap column height change without gaps in the column grid?Twitter Bootstrap 列高变化在列网格中没有间隙？
【发布时间】：2020-12-08 10:12:36
【问题描述】：

如何使 bootstrap 4.5 的一列高度变化更大，以便网格中没有间隙？见下图（测试 2 和测试 4 列应该没有间隙，只有测试 1 应该更高，其他高度相同）。

起始位置是所有列的高度相同。我可能会使用 jquery 来扩展“test 1”列。

相关代码在这里：

<div class="container">
    <div class="row">
        <div class="col-lg-6">
            <div class="row">
                
                <div class="col-lg-6" style="height: 400px; background: #eee; border: 1px solid #333;">
                    test 1
                </div>
                <div class="col-lg-6" style="height: 200px; background: #eee; border: 1px solid #333;">
                    test 2
                </div>
                <div class="col-lg-6" style="height: 200px; background: #eee; border: 1px solid #333;">
                    test 3
                </div>
                <div class="col-lg-6" style="height: 200px; background: #eee; border: 1px solid #333;">
                    test 4
                </div>
                
            </div>
        </div>
    </div>
</div>

【问题讨论】：

你有为此使用 Bootstrap 布局吗？这在 CSS flexbox 布局中会很多更简单。
谢谢。 BS 4.5 似乎也有 Flex 布局。这可能有助于让它工作吗？ getbootstrap.com/docs/4.5/utilities/flex

标签： html jquery css twitter-bootstrap

【解决方案1】：

您可以只使用min-height: 200px; 而不仅仅是设置高度。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
    <div class="row">
        <div class="col-lg-6">
            <div class="row">
                
                <div class="col-lg-6" style="height: 400px; background: #eee; border: 1px solid #333;">
                    test 1
                </div>
                <div class="col-lg-6" style="min-height: 200px; background: #eee; border: 1px solid #333;">
                    test 2
                </div>
                <div class="col-lg-6" style="height: 200px; background: #eee; border: 1px solid #333;">
                    test 3
                </div>
                <div class="col-lg-6" style="height: 200px; background: #eee; border: 1px solid #333;">
                    test 4
                </div>
                
            </div>
        </div>
    </div>
</div>

【讨论】：

抱歉，我的意思是 2,3 和 4 的高度为 200 像素，只有测试 1 的高度为 400 像素。测试4应该在测试2的正下方，没有差距……谢谢你的建议，很好。我的帖子有点模棱两可
@coder 啊，这是一个非常不同的问题，它完全违背了使用网格的目的。网格的设计目的是让事物保持现在的状态。我建议以不同的方式组织这个。比如并排的2个网格。

【解决方案2】：

我可以让它与两个 flex 列一起使用，但是顺序在电话布局中不起作用（它将是 1,3，...）。查看图片：

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

<div class="container">
    <div class="row">
        <div style="col-lg-6 d-flex flex-column">
            <div class="" style="height: 400px; width: 300px; background: #eee; border: 1px solid #333;">
                test 1
            </div>
            <div class="" style="height: 200px; width: 300px; background: #eee; border: 1px solid #333;">
                test 3
            </div>
        </div>
        <div style="col-lg-6 d-flex flex-column">

            <div class="" style="height: 200px; width: 300px; background: #eee; border: 1px solid #333;">
                test 2
            </div>
            <div class="" style="height: 200px; width: 300px; background: #eee; border: 1px solid #333;">
                test 4 sigh
            </div>

        </div>
    </div>
</div>

【讨论】：

【解决方案3】：

实际上，这可以通过制作我自己的浮动列来实现。它们似乎没有间隙地工作（向左浮动总是正确填充空间）。

【讨论】：