Bootstrap 卡:设置适当的卡块高度 [英] Bootstrap card: set proper card-block height

问题描述

我正在努力让这个 html 布局工作:

<div class="card-header">Title</div><div class="card-block><chart class="row" style="height: 100%"></chart>

这里的问题是，尽管卡片具有所需的高度，但是 元素的高度被忽略了，因为它的父元素 (

) 没有明确的高度.

我应该如何修改此代码段以使 <chart> 元素填充整个卡片，而不是卡片标题所需的部分?

这是整个布局:

<div id="left-col" class="col-md-4 pr-md-2">...</div><div id="right-col" class="col-md-8 pl-md-2" style="display: flex; flex-direction: column"><featured-graphs-component style="flex-grow: 1; height: 100%;"></featured-graphs-component><period-table-component class="mt-md-3" style="display: inline-block;"></period-table-component>

</节>

就是上面描述的卡片.

JsFiddle 重现问题:https://jsfiddle.net/zmcode/uk97kfLm/7/

解决方案

从 .card-block 中去除内边距，并使图表 display:flex 使用 (.d-flex)..

 
<div id="left-col" class="col-md-4 pr-md-2">...</div><div id="right-col" class="col-md-8 pl-md-2"><div class="card"><div class="card-header">Title</div><div class="card-block bg-faded p-0"><chart class="bg-info d-flex">图表<br><br><br><br><br><br></图表>

</节>

http://www.codeply.com/go/r9SJE984O8

<小时>

EDIT - 基于添加的更新代码.CSS height:100% 仅当包含元素具有定义的高度时才有效.只需将高度添加到:#chart-card-container.另外，h-100 在 Bootstrap 4 中设置 height: 100%.

http://www.codeply.com/go/6Yal88nBaT

I am struggling getting this html layout to work:

<div class="card" style="height: 100%;">
    <div class="card-header">Title</div>
    <div class="card-block>
        <chart class="row" style="height: 100%"></chart>
    </div>
</div>

The problem here is that, although the card has the desired height, the height of the <chart> element is ignored because its parent (<div class="card-block">) has not an explicit height.

How should I modify this snippet in order to have the <chart> element fill the whole card apart from the portion needed for the card-header?

EDIT: Here is the whole layout:

<section class="row equal my-md-3" style="height: 100%">
    <div id="left-col" class="col-md-4 pr-md-2">...</div>
    <div id="right-col" class="col-md-8 pl-md-2" style="display: flex; flex-direction: column">
        <featured-graphs-component style="flex-grow: 1; height: 100%;"></featured-graphs-component>
        <period-table-component class="mt-md-3" style="display: inline-block;"></period-table-component>
    </div>
</section>

The <featured-graphs-component> is the card described above.

EDIT2: JsFiddle to reproduce the problem: https://jsfiddle.net/zmcode/uk97kfLm/7/

解决方案

Remove the padding from the .card-block, and make the chart display:flex using (.d-flex)..

    <section class="row my-md-3">
        <div id="left-col" class="col-md-4 pr-md-2">...</div>
        <div id="right-col" class="col-md-8 pl-md-2">
            <div class="card">
                <div class="card-header">Title</div>
                <div class="card-block bg-faded p-0">
                    <chart class="bg-info d-flex">
                        chart
                        <br><br>
                        <br><br>
                        <br><br>
                    </chart>
                </div>
            </div>
        </div>
    </section>

http://www.codeply.com/go/r9SJE984O8

---

EDIT - Based on the updated code added. CSS height:100% only works if the containing element has a defined height. Just add a height to: #chart-card-container. Also, h-100 sets height: 100% in Bootstrap 4.

http://www.codeply.com/go/6Yal88nBaT

这篇关于Bootstrap 卡:设置适当的卡块高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！