html - 如何在 bootstrap 4 中正确对齐一系列图像？

Question

我有一组图像，我想将它们放在 block 的右侧。这是我尝试过的:

   <div class="row" >
        <div class="float-right">
            <img src="1.png"/>
            <img src="2.jpg"/>
            <img src="3.jpg"/>
            <img src="4.png"/>
        </div>
    </div>

但是图片还是全在左边。如果我删除“行”或用 d-block 之类的东西替换它，它们会向右移动，但是该部分与现有部分重叠!!

Answer 1

你需要使用:

<div class="d-flex justify-content-end">...</div>

d-flex 类使您的包装 div 成为 flexbox 布局，图像应该是该 div 的直接子级。 justify-content-end 类使所有图像都对齐到行的右侧。

引导文档:https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content