首页 文章

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

提问于
浏览 次
178

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

例如

Total cost                   $42

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

twitter-bootstrap user-interface bootstrap-4

6 回答

  • 2

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

    回复于
  • 420

    2018 Update...

    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

    回复于
  • 4

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

    回复于
  • 10

    在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>
    回复于
  • 43

    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/

    回复于
  • 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>

    那应该做的就好了

    回复于

相关问题