html - 不同列中第一个 div 的高度相同(bootstrap 4)

Question

我有下一个 HTML 结构:

<div class="container">
    <div class="row">
        <div class="col-12 col-sm-12 col-lg-4 col-md-4">
            <div class="title">Some title</div>
                <ul>
                    <li>test 1</li>
                    <li>test 2</li>
                </ul>
            </div>
        </div>

        <div class="col-12 col-sm-12 col-lg-4 col-md-4">
            <div class="title">Some long title </div>
                <ul>
                    <li>test 1</li>
                    <li>test 2</li>
                </ul>
            </div>
        </div>

        <div class="col-12 col-sm-12 col-lg-4 col-md-4" >
            <div class="title">Some very very long title</div>
            <ul>
                <li>test 1</li>
                <li>test 2</li>
            </ul>
        </div>
    </div>
</div>

我需要每个 div.title block 的高度都等于最高的。我该怎么做？

Answer 1

我认为最好的方法是使用表格，因为它们可以自动对齐多列。 Bootstrap 本身无法使多个标题在您提供的 HTML 结构中具有相同的高度。

此外，您要关闭两次 div 标签，请参阅 this example对于固定版本。您正在尝试关闭 title-divs 两次，如下所示:

            <div class="title">Some long title </div>
                <ul>
                    <li>test 1</li>
                    <li>test 2</li>
                </ul>
            </div>

虽然你应该只关闭一个标签一次，因为当前的代码会在不同的浏览器中做一些奇怪的事情。