html - CSS Bootstrap Row Flex 和显示问题

Question

我正在尝试使用 2 个 col-md-6 构建一个简单的网页，并且它们需要在不设置高度的情况下具有相同的高度。我已将样式显示 flex 添加到该行，所以它现在是等高的，只是我的 col-md-6 中的元素起作用了。

在第二个 col-md-6 中，我有一个很长的 HTML 表单，这将确定另一个 col-md-6 的长度(目前是这样)。在我的第一个 col-md-6 中，它分为两部分，第一部分由 Logo 和文本组成，第二部分将是我想要占据其余高度的背景图像。执行此操作的最佳方法是什么？

这是我到目前为止所做的，

<div class="container-fluid">

    <div class="row" style="display: flex;">

            <div class="col-md-6">

                <div class="info">

                    <!-- Logo and Text -->

                </div>

                <div class="background">

                    <!-- Background Image -->

                </div>


            </div>
            <div class="col-md-6">

                <!-- Long Form Here -->


            </div>      

    </div>


</div> 

Answer 1

同时制作第一个 col-md-6 display:flex 和 flex-direction:column。在背景图像 div 上使用 flex-grow:1。

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

<div class="container-fluid">
    <div class="row bg-info" style="display: flex;">
            <div class="col-md-6" style="display: flex;flex-direction:column">
                <div class="info">
                    Logo and Text
                </div>
                <div class="background">
                    Background
                </div>
            </div>
            <div class="col-md-6">

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