我尝试在这个 Bootstrap 示例中使用左列中的表格和右列中 2 行中的 4 列。这是代码:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6" style="background-color:lavender">
<p>Table which is hovered, stripped, bordered, contextual</p>
<table class="table table-hover table-striped table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>Default</td>
<td>Defaultson</td>
<td>def@somemail.com</td>
</tr>
<tr class="table-primary">
<td>Primary</td>
<td>Joe</td>
<td>joe@example.com</td>
</tr>
<tr class="table-primary">
<td>Primary</td>
<td>Joe</td>
<td>joe@example.com</td>
</tr>
</tbody>
</table>
</div>
<div class="col-lg-6">
<div class="row">
<div class="col-md-6" style="background-color:lavenderblush">
<p>Some text</p>
</div>
<div class="col-md-6" style="background-color:lavender;">
<p>Some text</p>
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color:lavender">
<p>Some text</p>
</div>
<div class="col-md-6" style="background-color:lavenderblush;">
<p>Some text</p>
</div>
</div>
</div>
</div>
</div>
</body>看起来像这样:
左栏高度随桌面高度自动调整，这很好。问题是右列没有根据左列调整其高度。我希望右列高度相对于左列高度，即平均分为2个堆叠列，这应该根据左列宽度自动调整:假设我有更多的表格行，左列高度肯定会增加但右栏高度也应该增加并且仍然是左栏高度的 50%。所以它看起来像这样:
最佳答案
基本上，您需要一些 flexbox 魔法。您可以将 flexbox 设置添加到 Bootstraps row 和 col- 但这本质上是不好的做法。我用快速代码做了一些测试，无法逃避这一点，但如果有更多时间和对 flexbox 的理解，你可以解决问题。最好的做法是始终设置新元素，永远不要自定义 BS 网格元素的任何 CSS。这意味着永远不要向 .row 或 .col- 之类的元素添加类，除非您要扩展这些组件。
说明:第二个 col- 有正确的高度，但它的 child 没有(.row)，所以你必须制作第二个 col- 一个 flexbox 元素(因此让它的 child 知道它的高度)并让 child (现在是 flexbox 元素)增长(均匀分布)。但同样，这不是一个好的做法，因为您不应该调整 BS 组件，它们有自己的属性，这些属性可能会以不希望的方式重叠。
TL:DR:将 display:flexbox 添加到第二个 col-xx-x 并制作 .row 里面随着 flex-grow:1 增长，但是为了更好的代码标准应该研究它。
关于javascript - Bootstrap : set height of a div relative to the height of another div?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/55008339/