359

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

例如

Total cost                   $42

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

4

7 回答 7

818

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-*不同宽度的不同对齐方式（即：）float-sm-right

flexbox utils（例如：）justify-content-between也可以用于对齐：

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

ml-auto或者，任何 flexbox 容器（行、导航栏、卡片、d-flex 等）中的自动边距（例如：）

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

Bootstrap 4 对齐演示
Bootstrap 4 右对齐示例（float、flexbox、text-right 等...）

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

引导程序 3 演示 2

于 2013-09-07T10:44:16.157 回答
66

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

于 2014-07-27T04:46:48.610 回答
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>
于 2016-09-30T15:33:12.510 回答
19

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

于 2017-03-23T13:38:36.290 回答
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

于 2017-12-27T12:31:08.480 回答
8

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

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

于 2021-01-18T03:51:30.547 回答
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>

那应该可以完成工作

于 2015-08-14T15:21:58.630 回答