使用 Flexbox 在 Bootstrap 4 .card 中对齐项目
[英] Aligning items within a Bootstrap 4 .card using Flexbox
本文介绍了使用 Flexbox 在 Bootstrap 4 .card 中对齐项目的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在使用 Bootstrap 4,并且有一个带有 card
类的 div,它具有固定的高度.这就是我想要得到的:
我使用的代码是
<div class="card-block d-flex flex-column"><h2 class="card-title h4 align-self-start">左上</h2><div class="align-self-center">中 中
<aside class="align-self-end">右下</aside>
但是这些行都被挤压在一起了,大概是因为 card-block
没有扩展到 card
的整个高度.
有没有办法让 card-block
填充 card
,或者让它正确显示?
解决方案
您可以在 card-block
..
上使用
justify-content-between
<div class="card-block d-flex flex-column"><h2 class="card-title h6 align-self-start flex-grow d-flex">左上<br>左上</h2><div class="align-self-center flex-grow d-flex">中 中
<aside class="align-self-end flex-grow d-flex align-items-end">右下角</aside>
.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屋!