使用Flexbox在Bootstrap 4 .card中对齐项目 [英] Aligning items within a Bootstrap 4 .card using Flexbox

问题描述

我正在使用Bootstrap 4，并在其上有一个card类的div，它具有固定的高度.这就是我想要得到的:

我正在使用的代码是

<div class="card">
    <div class="card-block d-flex flex-column">
        <h2 class="card-title h4 align-self-start">Top Left</h2>
        <div class="align-self-center">
            Middle Middle
        </div>
        <aside class="align-self-end">Bottom Right</aside>
    </div>
</div>

但是所有行都被挤压在一起，大概是因为card-block并未扩展到card的整个高度.

有没有办法让card-block填充card，或者以其他方式使其正确显示?

解决方案

您可以在card-block上使用justify-content-between.

<div class="card">
    <div class="card-block d-flex flex-column">
        <h2 class="card-title h6 align-self-start flex-grow d-flex">Top Left<br>Top Left</h2>
        <div class="align-self-center flex-grow d-flex">
            Middle Middle
        </div>
        <aside class="align-self-end flex-grow d-flex align-items-end">Bottom Right</aside>
    </div>
</div>

.flex-grow {
    flex: 1 0 0;
}

演示: https://www.codeply.com/go/5dIgA0ul2q

更新2018年Bootstrap 4(稳定) card-block现在是card-body

I'm using Bootstrap 4, and have a div with the card class on it, which has a fixed height. This is what I'm trying to get:

The code I'm using is

<div class="card">
    <div class="card-block d-flex flex-column">
        <h2 class="card-title h4 align-self-start">Top Left</h2>
        <div class="align-self-center">
            Middle Middle
        </div>
        <aside class="align-self-end">Bottom Right</aside>
    </div>
</div>

but the lines are all squashed together, presumably because the card-block is not expanding to the full height of the card.

Is there a way to get the card-block to fill the card, or otherwise get this to display correctly?

解决方案

You can use justify-content-between on the card-block..

<div class="card">
    <div class="card-block d-flex flex-column">
        <h2 class="card-title h6 align-self-start flex-grow d-flex">Top Left<br>Top Left</h2>
        <div class="align-self-center flex-grow d-flex">
            Middle Middle
        </div>
        <aside class="align-self-end flex-grow d-flex align-items-end">Bottom Right</aside>
    </div>
</div>

.flex-grow {
    flex: 1 0 0;
}

Demo: https://www.codeply.com/go/5dIgA0ul2q

Update 2018 Bootstrap 4 (stable) card-block is now card-body

这篇关于使用Flexbox在Bootstrap 4 .card中对齐项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！