在Bootstrap中的div内左对齐和右对齐 [英] Left align and right align within div in Bootstrap

问题描述

在bootstrap的div容器内，左对齐某些文本并右对齐其他文本的常见方法有哪些?

例如

Total cost                   $42

以上总费用应为左对齐文本，$ 42为右对齐文本

解决方案

2018更新...

Bootstrap 4.1 +

• pull-right现在是float-right
• text-right与3.x相同，适用于内联元素
• float-*和text-*都是响应用于在不同宽度(即float-sm-right)的不同对齐方式

flexbox实用程序(例如:justify-content-between)也可以用于对齐:

<div class="d-flex justify-content-between">
      <div>
         left
      </div>
      <div>
         right
      </div>
 </div>

或者在任何flexbox容器(行，导航栏，卡，d-flex等)中的自动边距(例如:ml-auto)

<div class="d-flex">
      <div>
         left
      </div>
      <div class="ml-auto">
         right
      </div>
 </div>

Bootstrap 4 Align Demo
Bootstrap 4右对齐示例(浮动，flexbox，文本右对齐等) >

---

引导程序3

使用pull-right类.

<div class="container">
  <div class="row">
    <div class="col-md-6">Total cost</div>
    <div class="col-md-6"><span class="pull-right">$42</span></div>
  </div>
</div>

Bootstrap 3演示

您还可以像这样使用text-right类:

  <div class="row">
    <div class="col-md-6">Total cost</div>
    <div class="col-md-6 text-right">$42</div>
  </div>

Bootstrap 3演示2

What are some of the common ways to left align some text and right align some other text within a div container in bootstrap?

e.g.

Total cost                   $42

Above total cost should be left aligned text and $42 is right aligned text

解决方案

2018 Update...

Bootstrap 4.1+

• pull-right is now float-right
• text-right is the same as 3.x, and works for inline elements
• both float-* and text-* are responsive for different alignment at different widths (ie: float-sm-right)

The flexbox utils (eg:justify-content-between) can also be used for alignment:

<div class="d-flex justify-content-between">
      <div>
         left
      </div>
      <div>
         right
      </div>
 </div>

or, auto-margins (eg:ml-auto) in any flexbox container (row,navbar,card,d-flex,etc...)

<div class="d-flex">
      <div>
         left
      </div>
      <div class="ml-auto">
         right
      </div>
 </div>

Bootstrap 4 Align Demo
Bootstrap 4 Right Align Examples(float, flexbox, text-right, etc...)

---

Bootstrap 3

Use the pull-right class..

<div class="container">
  <div class="row">
    <div class="col-md-6">Total cost</div>
    <div class="col-md-6"><span class="pull-right">$42</span></div>
  </div>
</div>

Bootstrap 3 Demo

You can also use the text-right class like this:

  <div class="row">
    <div class="col-md-6">Total cost</div>
    <div class="col-md-6 text-right">$42</div>
  </div>

Bootstrap 3 Demo 2

这篇关于在Bootstrap中的div内左对齐和右对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！