如何在引导程序 4 中对齐一系列图像？答案

【问题标题】：How to align right a series of images in bootstrap 4?如何在引导程序 4 中对齐一系列图像？
【发布时间】：2020-02-04 23:01:45
【问题描述】：

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

   <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 之类的内容，它们会向右移动，但是该分区与现有分区重叠！！

【问题讨论】：

您的意思是“该部门与现有部门重叠”？ Bootstrap row only 用于包含列 (col-*)，由于它是 flexbox，float 不起作用。见：stackoverflow.com/questions/43146263/…
@zim 谢谢，这就是我的回答！无论如何，在没有 col-* 的情况下还应该使用什么来获得行功能？
你可以使用d-flex

标签： html css bootstrap-4 alignment

【解决方案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

【讨论】：