调整内容以适应不同的断点Bootstrap 4

Question

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

<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和向上显示。

演示版