在Bootstrap中，如何在div内左对齐和右对齐？

Question

在Bootstrap中，如何在div内左对齐和右对齐？

twitter-bootstrapuser-interfacebootstrap-4bootstrap-5

420

在Bootstrap中，左对齐某些文本并右对齐其他文本的常用方法有哪些？

例如：

Total cost                   $42

以上总费用应该是左对齐的文本，$42 是右对齐的文本

- user462455

8个回答

66

在列中，最好使用text-right类而不是pull-right类，因为在调整页面大小时pull-right会有问题。

- Arun Agarwal

25

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>

请访问 https://v4-alpha.getbootstrap.com/utilities/flexbox/ 以了解更多信息。

- William Entriken

24

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

这样做的原因是xs表示BS中最小的视口尺寸。如果你想的话，你可以通过使用text-md-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">$42</div>
</div>

- Erik Berkun-Drevnig

15

Bootstrap 5.0

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

<div class="row">
  <div class="col-sm-6"><p class="float-start">left</p></div>  
  <div class="col-sm-6"><p class="float-end">right</p></div>  
</div>

一整列可以容纳12个元素，而6个（col-sm-6）恰好是一半。在这半个列中，一个元素在左边放置(float-start)，另一个在右边放置(float-end)。

更多例子

fontawesome-button

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" />

<div class="row">
  <div class=col-sm-6>
    <p class="float-start text-center">  <!-- text-center can help you put the icon at the center -->
      <a class="text-decoration-none" href="https://www.google.com/"
      ><i class="fas fa-arrow-circle-left fa-3x"></i><br>Left
      </a>
    </p>
  </div>
  <div class=col-sm-6>
    <p class="float-end text-center">
      <a class="text-decoration-none" href="https://www.google.com/"
      ><i class="fas fa-arrow-circle-right fa-3x"></i><br>Right
      </a>
    </p>
  </div>

- Carson

Bootstrap 5（beta）将“text-right”替换为“text-end”，将“text-left”替换为“text-start”。 “text-center”保持不变。 - P. Wormer

只有这个对我有效，使用Bootstrap 5。 - Gaetano L

谢谢 - 我也刚刚偶然发现了这个。 - iLuvLogix

9

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

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

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

示例: JSFiddle

- pradeep kumar

1

<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">$42</div>
</div>

那应该可以完成工作。

- Terrymight

谢谢。这是哪个Bootstrap版本？ - jovialcore

@jovialcore 没问题，这是第三个版本。 - Terrymight

0

<div class="row">
    <div class="col float-start">
        Total Cost
    </div>
    <div class="col float-end">
        42
    </div>
</div>

这个代码会运行并且很容易理解。在class属性中，我使用了Bootstrap 5的类。

- Pranay Rawat

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Zim · Accepted Answer

2021年更新...

Bootstrap 5 (beta)

用于在 flexbox div 或 row 中对齐...

ml-auto 现在为 ms-auto
mr-auto 现在为 me-auto

用于文本对齐或浮动..

text-left 现在为 text-start
text-right 现在为 text-end
float-left 现在为 float-start
float-right 现在为 float-end

Bootstrap 4+

pull-right 现在为 float-right
text-right 与 3.x 相同，适用于内联元素
对于不同宽度的不同对齐方式（例如：float-sm-right），float-* 和 text-* 都是响应式的

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

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

或者，在任何弹性盒容器（行，导航栏，卡片，d-flex等）中使用自动边距（例如：ml-auto）。

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

Bootstrap 4对齐演示
 Bootstrap 4右对齐示例(浮动，Flexbox，text-right，等等...)

Bootstrap 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