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

作者: 只怕再见是故人
发布时间: 2025-02-05 11:11:33 (6小时前)
转自：

6 条回复

0#
回复此人
句号了 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> <击> 在Bootstrap 4中，正确的答案是使用 <code> text-xs-right </code> 类。 </击> </p> <P> 这是因为 <code> xs </code> 表示BS中的最小视口大小。如果您愿意，可以通过使用仅在视口为中等或更大时应用对齐 <code> text-md-right </code> 。 </p> <P> 在最新的alpha中， <code> text-xs-right </code> 已被简化为 <code> text-right </code> 。 </p> <pre> <code> <div class="row"> <div class="col-md-6">Total cost</div> <div class="col-md-6 text-right">$42</div> </div> </code> </pre> </DIV>

编辑
1#
回复此人
Mystery☀ | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 我们可以通过Bootstrap 4 Flexbox实现： </p> <pre> <code> <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% </code> </pre> <P> 例： <a href="https://jsfiddle.net/pradeep0594/q0uvLoug/" rel="nofollow noreferrer"> 的jsfiddle </A> </p> </DIV>

编辑
2#
回复此人
誓言 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <pre> <code> <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> </code> </pre> <P> 那应该做的就好了 </p> </DIV>

编辑
3#
回复此人
仙风道骨刘憨憨 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 而不是使用 <code> pull-right </code> 上课，最好用 <code> text-right </code> 列中的类，因为 <code> pull-right </code> 在调整页面大小时有时会产生问题。 </p> </DIV>

编辑
4#
回复此人
無口君 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> Bootstrap v4引入了flexbox支持 </p> <pre> <code> <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> </code> </pre> <P> 了解更多信息 <a href="https://v4-alpha.getbootstrap.com/utilities/flexbox/" rel="noreferrer"> https://v4-alpha.getbootstrap.com/utilities/flexbox/ </A> </p> </DIV>

编辑

登录后才能参与评论