自举嵌套的col不会伸展全高度

Question

我有3列都在一行中，每列都有嵌套行，还有3列。

.row
    .col

        .row
            .col
            .col <-- needs to be full height
    .col
        .row
            .col
            .col <-- needs to be full height
    .col
        .row
            .col
            .col <-- needs to be full height

​

​

正如您所看到的，中间的列并没有伸展整个高度。

我试过align-items-stretch和h-100，但没有运气。

任何帮助都是非常感谢的！谢谢!

这里的完整代码

        <div class="container bg-secondary pt-5">
        <div class="row">
            <div class="col mx-5 px-5">
                <div class="row">
                    <div class="col-12">
                        <img src="/imgs/1.jpg" alt="" />
                    </div>
                    <div class="col-12 bg-light">
                        <p>Submitting an issue through Orem 311 is a great way to get the ball rolling.</p>
                        <p>Submitting an issue through Orem 311 is a great way to get the ball rolling.</p>
                    </div>
                </div>
            </div>
            <div class="col mx-5 px-5">
                <div class="row">
                    <div class="col-12">
                        <img src="/imgs/2.jpg" alt="" />
                    </div>
                    <div class="col-12 bg-light">
                        <p>Submitting an issue through Orem 311 is a great way to get the ball rolling.</p>
                    </div>
                </div>
            </div>
            <div class="col mx-5 px-5">
                <div class="row">
                    <div class="col-12">
                        <img src="/imgs/3.jpg" alt="" />
                    </div>
                    <div class="col-12 bg-light">
                        <p>Submitting an issue through Orem 311 is a great way to get the ball rolling.</p>
                        <p>Submitting an issue through Orem 311 is a great way to get the ball rolling.</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

Answer 1

为此，您可以使用Bootstrap的FlexBox实用程序。

row flex-row h-100.

• Give

1. 给出了.col.mx-5下的.row类：
2. .col-12，它应该是小的，flex-shrink-1类，
3. 给出.col-12，它应该是更长的，h-100 flex-grow-1类。H 213G 214

完整法典：

<div class="col mx-5 px-5">
  <div class="row flex-row h-100">
    <div class="col-12 flex-shrink-1">
      <img src="/imgs/2.jpg" alt="" />
    </div>
    <div class="col-12 bg-light flex-grow-1 h-100">
      <p>Submitting an issue through Orem 311 is a great way to get the ball rolling.</p>
    </div>
  </div>
</div>

我已经检查过了，而且效果很好。