Question

我正在努力解决此处定义的布局：https://jsfiddle.net/zmcode/uk97kfLm/20/。

问题是右边卡片中的红色div应该填满整个卡块。

有人可以帮助我理解我应该如何修改此布局，以使#right-card-content填充整个正确的卡块？

编辑 @MateusFelipe提出的解决方案实际上适用于Firefox。不幸的是，我也需要它在Chrome（v57）上工作。

Answer 1

我previously explained h-100高度：100％，这仅在容器具有已定义的高度时才有效。

<div class="row equal h-100">
  <div id="left-col" class="col-md-4 pr-md-2">
    <div class="card">
      Left Card
    </div>
  </div>
  <div id="right-col" class="col-md-8 pl-md-2">
    <div id="right-card-container">
      <div class="card">
        <div class="card-header">Right Card</div>
        <div class="card-block h-100">
          <div id="right-card-content" class="row">.</div>
        </div>
      </div>
    </div>
    <div id="right-bottom-element" class="mt-md-3">
      Right Bottom Element
    </div>
  </div>
</div>

Answer 2

This可能会解决您的问题。

我已将div的width设置为100%，从中删除了row类，并删除了父{（1 {}}}的填充{{1} }。

card-block

p-0

设置Bootstrap卡中的内容高度，使其填满整个卡块

2 个答案: