为不同的断点证明内容 Bootstrap 4 [重复]

Posted 2023-03-05

【中文标题】为不同的断点证明内容 Bootstrap 4 [重复]

【英文标题】：Justify Content for different break points Bootstrap 4 [duplicate]

【发布时间】：2018-09-25 04:38:10

【问题描述】：

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

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

【问题讨论】：

到目前为止你尝试过什么？你有read the docs吗？您的意思是在列内对齐文本，还是在行内对齐列？

【参考方案1】：

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

<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

【讨论】：

人......你是完全正确的。 #@#$ 只是在文档中错过了这一点。你明白了。 ;)

乐于助人。感谢您接受答案。