更多例子

Question

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

e.g。

Total cost                   $42

以上总费用应为左对齐文字，42美元为右对齐文字

Answer 1

2018年更新...

Bootstrap 4.1 +

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>

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

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

Bootstrap 4 Align Demo
Bootstrap 4 Right Align Examples（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 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

Answer 2

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

Answer 3

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

了解详情

Answer 5

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

Answer 6

some_int = <256 bit integer>
some_bytes = some_int.to_bytes(32, sys.byteorder)
my_bytearray = bytearray(some_bytes)

那应该做的就好了

Answer 7

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)和一个向右({{ 1}}).

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

7 个答案:

更多例子