- 首页
- 其他开发
- Bootstrap中div内的左对齐和右对齐
Bootstrap中div内的左对齐和右对齐
[英] Left align and right align within div in Bootstrap
本文介绍了Bootstrap中div内的左对齐和右对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在引导程序中的 div 容器内左对齐一些文本和右对齐一些其他文本的一些常见方法是什么?
例如
总成本 42 美元
高于总成本的应该是左对齐文本，$42 是右对齐文本
解决方案
2021 更新...
引导程序 5(测试版)
用于在 flexbox div 或 row...
中对齐
ml-auto 现在是 ms-automr-auto 现在是 me-auto
对于文本对齐或浮动..
text-left 现在是 text-starttext-right 现在是 text-endfloat-left 现在是 float-startfloat-right 现在是 float-end
引导程序 4+
pull-right 现在是 float-righttext-right 与 3.x 相同，适用于内联元素float-* 和 text-* 都是 响应式 用于不同宽度的不同对齐(即:float-sm-right)
flexbox utils(例如:justify-content-between)也可用于对齐:
<div>剩下
<div>对
或者，任何 flexbox 容器(行、导航栏、卡片、d-flex 等...)中的自动边距(例如:ml-auto)
<div>剩下
<div class="ml-auto">对
Bootstrap 4 对齐演示
Bootstrap 4 右对齐示例(float、flexbox、text-right 等...)><小时>
引导程序 3
使用 pull-right 类..
<div class="row"><div class="col-md-6">总成本</div><div class="col-md-6"<span class="pull-right">$42</span></div>
Bootstrap 3 演示
您也可以像这样使用 text-right 类:
<div class="col-md-6">总成本</div><div class="col-md-6 text-right">$42</div>
Bootstrap 3 演示 2
What are some of the common ways to left align some text and right align some other text within a div container in bootstrap?
e.g.
Total cost $42
Above total cost should be left aligned text and $42 is right aligned text
解决方案
2021 Update...
Bootstrap 5 (beta)
For aligning within a flexbox div or row...
ml-auto is now ms-automr-auto is now me-auto
For text align or floats..
text-left is now text-starttext-right is now text-endfloat-left is now float-startfloat-right is now float-end
Bootstrap 4+
pull-right is now float-righttext-right is the same as 3.x, and works for inline elements- both
float-* and text-* are responsive for different alignment at different widths (ie: float-sm-right)
The flexbox utils (eg:justify-content-between) can also be used for alignment:
<div class="d-flex justify-content-between">
<div>
left
</div>
<div>
right
</div>
</div>
or, auto-margins (eg:ml-auto) in any flexbox container (row,navbar,card,d-flex,etc...)
<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, etc...)
Bootstrap 3
Use the pull-right class..
<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
You can also use the text-right class like this:
<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
这篇关于Bootstrap中div内的左对齐和右对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
