bootstrap-4 - 为不同的断点调整内容 Bootstrap 4

Question

这个问题已经有答案了:

Bootstrap Center Vertical and Horizontal Alignment (18 个回答)

已关闭 5 年前。

如何为不同断点证明列内容的合理性。例如，我希望以下电子邮件文本对于 > 中等列对齐到末尾，但对于较小的列则对齐到中心。寻找一个优雅的解决方案。

<div class="row">
            <div class="col-md-4">
              Email
            </div>
</div>

Answer 1

要定位列 div 的内容，您可以使用带有 d-flex 的 justify-content-* 类的响应式版本

<div class="row">
    <div class="col-md-4 d-flex justify-content-md-end justify-content-center">
      Email
    </div>
</div>

只需添加类 d-flex 来显示 Flex，并添加 justify-content-md-end 类以在列的末尾对齐以显示 md 并向上，并添加 justify-content-center对齐显示 xs 和向上的中心。

Demo