首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >Bootstrap中div内的左对齐和右对齐

Bootstrap中div内的左对齐和右对齐
EN

Stack Overflow用户
提问于 2013-09-07 18:40:40
回答 4查看 1M关注 0票数 343

在bootstrap中,在div容器中左对齐一些文本和右对齐其他一些文本的常用方法是什么?

例如:

代码语言:javascript
复制
Total cost                   $42

以上总成本应为左对齐文本,$42为右对齐文本

EN

回答 4

Stack Overflow用户

发布于 2014-07-27 12:46:49

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

票数 66
EN

Stack Overflow用户

发布于 2017-03-23 21:38:36

Bootstrap v4引入了flexbox支持

代码语言:javascript
复制
<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/

票数 19
EN

Stack Overflow用户

发布于 2017-12-27 20:31:08

我们可以通过Bootstrap 4 Flexbox实现:

代码语言:javascript
复制
<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

票数 8
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/18672452

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档