Bootstrap中的div内左对齐和右对齐

Posted 2023-02-16

【中文标题】Bootstrap中的div内左对齐和右对齐

【英文标题】：Left align and right align within div in Bootstrap

【发布时间】：2013-09-11 10:05:13

【问题描述】：

在引导程序中，在 div 容器中左对齐某些文本和右对齐某些其他文本的常用方法有哪些？

例如

Total cost                   $42

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

【参考方案1】：

2021 年更新...

引导程序 5（测试版）

用于在 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

引导 4+

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

flexbox utils（例如：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 DemoBootstrap 4 Right Align Examples(float, flexbox, text-right, etc...)

---

引导程序 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 Demo

您也可以像这样使用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 Demo 2

【讨论】：

对于 Bootstrap 3，对于列，text-right 为我工作。

对于 bootstrap 5 将 .text-left 和 .text-right 重命名为 .text-start 和 .text-end。

各个版本重命名类的目的是什么？

【参考方案2】：

bootstrap 5.0

float row

<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）。

更多示例

字体真棒按钮

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

【讨论】：

Bootstrap 5 (beta) 将“text-right”替换为“text-end”，将“text-left”替换为“text-start”。 “文本中心”保持不变。

只有这对我有用，使用 bootstrap 5

【参考方案3】：

我们可以通过 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

【参考方案4】：

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/了解更多信息

【参考方案5】：

在 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>

【参考方案6】：

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

应该可以正常工作

【讨论】：

谢谢。这是什么引导版本？

@jovialcore 欢迎您。它是第 3 版

【参考方案7】：

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