在Bootstrap中在div内左对齐并右对齐

Question

有什么常见的方法可以左对齐一些文本并在引导程序中对div容器中的其他文本进行右对齐？

例如

Total cost                   $42

以上总费用应为左对齐文本,42美元为右对齐文本

Answer 1

2018年更新......

Bootstrap 4.1+

• 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任何弹性箱容器中的自动边距(例如:: )(行,导航栏,卡片,d-flex等...)

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

Bootstrap 4 Align Demo
Bootstrap 4右对齐示例(float,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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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/

Answer 6

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