有哪些常用的方法来左对齐一些文本和右对齐一些其他文本在div容器在引导?
e.g.
Total cost $42
以上总成本应左对齐文本和42美元右对齐文本
当前回答
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/
其他回答
我们可以通过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
<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>
这样应该就可以了
引导5.0
浮动 行
<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)，一个在右边(float-end)。
更多的例子
fontawesome-button <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"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" integrity="sha512-HK5fgLBL+xu6dm/Ii3z4xhlSUyZgTT9tuc/hSrtw6uzJOvgRr2a9jyxxT1ely+B+xFAmJKVSTbpM/CuL7qxO8w==" crossorigin="anonymous" /> <div class="row"> <div class=col-sm-6> <p class="float-start text-center"> <!-- text-center can help you put the icon at the center --> <a class="text-decoration-none" href="https://www.google.com/" ><i class="fas fa-arrow-circle-left fa-3x"></i><br>Left </a> </p> </div> <div class=col-sm-6> <p class="float-end text-center"> <a class="text-decoration-none" href="https://www.google.com/" ><i class="fas fa-arrow-circle-right fa-3x"></i><br>Right </a> </p> </div>
与其在列中使用右拉类，不如在列中使用文本右拉类，因为在调整页面大小时，右拉有时会产生问题。
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/
