Twitter bootstrap Boostrap在一列上绘制两个面板

我的目标基本上是：

+-----------------------------+
|      A      ||      B       |
+-----------------------------+
|             ||              |
|             ||              |
|             ||      Btext   |
|             ||              |
|     Atext   ||              |
|             ||              |
|             |---------------|
|             |               |
|             |               |
|             |               |
|             |               |
|             |     Ctext     |
|             |               |
|             |               |
|             |               |
+-------------+---------------+

我有以下片段：

<div class="row" style="padding-top:10px;margin:0px;">
    <div class="col-md-6">
        <h3><span id="headerLeftPlanel">A</span>&nbsp;<i class="fas fa-exchange-alt"></i></h3>
        <hr />
    </div>
    <div class="col-md-6">
        <h3>B</h3>
        <hr />
    </div>
</div>
<div class="row" style="padding-top:10px;margin:0px;">
    <div class="col-md-6" style="max-height: 92vh;overflow-y: scroll;">

    </div>
    <div class="col-md-6" style="overflow-y: scroll;">
        <div class="row" style="min-height:40%">
            <div class="col-md-12" style="overflow-y: scroll;">
                BText
            </div>
        </div>
        <div class="row">
            <div class="col-md-12" style="overflow-y: scroll;">
               Ctext
            </div>
        </div>
    </div>
</div>

A.

B

B文本
Ctext

但是，我的BText和CText不适合页面的高度。 我应该使用什么布局来代替？

---

我已尝试将

min height

设置为BText，但无效，两行会缩小。

它们不会调整，因为您既没有在左侧容器中定义高度，也没有在右侧容器中定义高度。您定义的是左容器中的

最大高度：92vh

，右容器中的

最小高度：40%

，将右容器设置为左容器高度的最小

40%

。这将导致您所描述的问题：

您可以通过以下方式解决此问题：

在左侧容器上定义高度，如

高度：92vh

。看

在右侧容器上定义高度，如

最小高度：40vh

。看

结果如下：