针对不同断点对齐内容Bootstrap 4

Question

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

<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添加到display flex，并将justify-content- md -end添加到显示md及以上的列的末尾，将justify-content-center添加到显示X及以上的列的中心。

Demo