Question

在下面的示例中是否有一种引导方法可以使id为“second”的div适合其父容器，并且在给定h-100类时不会溢出？我使用的一种hacky方法是将overflow:hidden应用于#second div的父容器，它可以完成我的特定情况，但在这种情况下这会被称为优雅解决方案吗？

<div class="container">
    <div class="row">
        <div class="col-6 bg-dark">
            <div id="first">
                <h5 class="text-white">some title</h5>
            </div>
            <div id="second" class="h-100 bg-success">

            </div>
        </div>
        <div class="col-6 bg-danger">
            <a href="https://placeholder.com"><img src="http://via.placeholder.com/540x400"></a>
        </div>
    </div>
</div>

https://www.codeply.com/go/pSVIlOETpB

Answer 1

当然，只需使用col-6类来显示包含d-flex flex-column的显示：flex，flex-direction：列...

https://www.codeply.com/go/5YiBkLo0qO

<div class="container">
    <div class="row">
        <div class="col-6 bg-dark d-flex flex-column">
            <div id="first">
                <h5 class="text-white">some title</h5>
            </div>
            <div id="second" class="h-100 bg-success">

            </div>
        </div>
        <div class="col-6 bg-danger">
            <a href="https://placeholder.com"><img src="http://via.placeholder.com/540x400"></a>
        </div>
    </div>
</div>

Bootstrap 4个多个子div列填充高度100％

1 个答案: