如何在 Bootstrap 的 DIV 中左右对齐文本

主题：Bootstrap / Sass上一页|下一页

答案：使用justify-content-between类

您可以在 Bootstrap 4 的 <div> 容器中简单地使用类 .justify-content-between 与类 .d-flex 到 左对齐 和 右对齐 文本内容。

让我们试试下面的例子来了解它的基本工作原理：

<div class="bg-light d-flex justify-content-between">
    <div>Total Cost</div>
    <div>$50</div>
</div>

如果您使用的是 Bootstrap 3 版本，则可以使用 .pull-left 和 .pull-right 类来左右对齐同一 DIV 元素中的文本。 另外，不要忘记在父 <div> 上应用类 .clearfix，如果它不是网格列（即 .col-*）。 这是一个例子：

<div class="bg-light clearfix">
    <div class="pull-left">Total Cost</div>
    <div class="pull-right">$50</div>
</div>

您还可以在 Bootstrap 4 中使用此解决方案，方法是将 pull-left 类替换为 float-left 类，将 pull-right 类替换为 float-right 类。

FAQ 相关问题解答

以下是与此主题相关的更多常见问题解答：

• 如何在 Bootstrap 中居中按钮
• 如何在 Bootstrap 中将响应式图像居中对齐
• 如何在 Bootstrap 中垂直对齐 DIV