左对齐和右对齐在div引导

有哪些常用的方法来左对齐一些文本和右对齐一些其他文本在div容器在引导?

如。

Total cost                   $42

以上总成本应左对齐文本和42美元右对齐文本

1209807 次浏览
小开
最佳答案

<强> 2021更新…< / >强

引导5 (beta)

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

或者，在任何flexbox容器(行，导航栏，卡，d-flex等…)中的自动边距(例如:ml-auto)

<div class="d-flex">
<div>
left
</div>
<div class="ml-auto">
right
</div>
</div>
< p > 引导4对齐演示 < br > 引导4右对齐示例(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

小开

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

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

这样应该就可以了

小开

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

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

小开

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

小开

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

更多的例子

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


提交答案