twitter-bootstrap Bootstrap中div内的左对齐和右对齐

Left align and right align within div in Bootstrap

提问by user462455

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

在引导程序中的 div 容器内左对齐一些文本和右对齐一些其他文本的一些常见方法是什么？

e.g.

例如

Total cost                   

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

高于总成本的应该是左对齐文本，42 美元是右对齐文本

回答by Zim

2018 Update...

2018年更新...

Bootstrap 4.1+

引导程序 4.1+

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

• pull-right就是现在 float-right
• text-right与 3.x 相同，适用于内联元素
• 两者float-*并text-*是响应为在不同宽度的不同比对（即：float-sm-right）

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

flexbox 实用程序（例如：）justify-content-between也可用于对齐：

<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...)

或者，ml-auto在任何 flexbox 容器（row、navbar、card、d-flex 等...）中自动设置边距（例如：）

<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 4 对齐演示
Bootstrap 4 右对齐示例（浮动、弹性框、文本右对齐等...）

---

---

Bootstrap 3

引导程序 3

Use the pull-rightclass..

使用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"></span></div>
  </div>
</div>

Bootstrap 3 Demo

Bootstrap 3 演示

You can also use the text-rightclass like this:

你也可以text-right像这样使用这个类：

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

Bootstrap 3 Demo 2

引导程序 3 演示 2

回答by Arun Agarwal

Instead of using pull-rightclass, it is better to use text-rightclass in the column, because pull-rightcreates problems sometimes while resizing the page.

与其使用pull-right类，不如text-right在列中使用类，因为pull-right有时在调整页面大小时会产生问题。

回答by Erik Berkun-Drevnig

In Bootstrap 4 the correct answer is to use the text-xs-rightclass.

在 Bootstrap 4 中，正确的答案是使用text-xs-right类。

This works because xsdenotes the smallest viewport size in BS. If you wanted to, you could apply the alignment only when the viewport is medium or larger by using text-md-right.

这是有效的，因为xs表示 BS 中的最小视口大小。如果您愿意，您可以使用text-md-right.

In the latest alpha, text-xs-righthas been simplified to text-right.

在最新的 alpha 中，text-xs-right已简化为text-right.

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

回答by William Entriken

Bootstrap v4 introduces flexbox support

Bootstrap v4 引入了 flexbox 支持

<div class="d-flex justify-content-end">
  <div class="mr-auto p-2">Flex item</div>
  <div class="p-2">Flex item</div>
  <div class="p-2">Flex item</div>
</div>

Learn more at https://v4-alpha.getbootstrap.com/utilities/flexbox/

在https://v4-alpha.getbootstrap.com/utilities/flexbox/了解更多信息

回答by pradeep kumar

We can achieve by Bootstrap 4 Flexbox:

我们可以通过 Bootstrap 4 Flexbox 实现：

<div class="d-flex justify-content-between w-100">
<p>TotalCost</p> <p></p>
</div>

d-flex // Display Flex
justify-content-between // justify-content:space-between
w-100 // width:100%

Example: JSFiddle

示例：JSFiddle

回答by Terrymight

<div class="row">
  <div class="col-xs-6 col-sm-4">Total cost</div>
  <div class="col-xs-6 col-sm-4"></div>
  <div class="clearfix visible-xs-block"></div>
  <div class="col-xs-6 col-sm-4"></div>
</div>

That should do the job just ok

那应该可以正常工作