我有一个引导5行多列的。每列有一个图像和一个段落。
这些图像有不同的高度,所以为了对齐一切我想:
1.使用h-100
为子div指定100%的高度
1.用align-top
将图像与顶部对齐
1.用align-bottom
将段落底端对齐
<div class="row">
<div class="mt-5 col text-center">
<div class="h-100 border">
<div class="align-top">
<img class="img-fluid" src="example1.png" width="180">
</div>
<div class="align-bottom">
<p>Paragraph 1</p>
</div>
</div>
</div>
<div class="mt-5 col text-center">
<div class="h-100 border">
<div class="align-top">
<img class="img-fluid" src="example2.png" width="180">
</div>
<div class="align-bottom">
<p>Paragraph 2</p>
</div>
</div>
</div>
</div>
但是align-bottom
不起作用,很可能align-top
也不起作用,但是没有检查,因为默认是在顶部对齐。
我做错了什么?
1条答案
按热度按时间du7egjpx1#
您必须使用下列Bootstrap类别:
flex-grow-1 d-flex justify-content-center align-items-end
,其中:flex-grow-1
强制文本总是填充图像下面剩余的空白空间,justify-content-center
将文字水平置中,align-items-end
将文本垂直推到底部。id="img-1
和id="img-2
(仅用于说明)。*请参阅下面的片段。
第一个