为不同的断点证明内容Bootstrap 4

Question

如何为不同断点的列内容辩护。例如，我希望将以下电子邮件文本证明为＆gt;中等列，但对于较小的列，中心是合理的。寻找一个优雅的解决方案。

<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