引导项圈对齐

我正试着创建一个有两个备忘录的行。左边一个 coll 的内容左对齐，第二个 coll 的内容右对齐(旧的 pull-right)。

在 Alpha-6我该怎么做？

我尝试了一些方法，但目前为止只有这些，我错过了什么？

<div class="row">
<div class="col">left</div>
<div class="col ml-auto">content needs to be right aligned</div>
</div>
288304 次浏览
小开
最佳答案

Bootstrap 5(更新2021)

对齐引导程序5中的元素。

float-right现在是 float-end
text-right现在是 text-end
ml-auto现在是 ms-auto < br >

引导程序4(原始答案)

对块元素使用 float-right，对内联元素使用 text-right:

<div class="row">
<div class="col">left</div>
<div class="col text-right">inline content needs to be right aligned</div>
</div>
<div class="row">
<div class="col">left</div>
<div class="col">
<div class="float-right">element needs to be right aligned</div>
</div>
</div>

Http://codeply.com/go/optbdcw1jv

如果 float-right不工作， 请记住，引导4现在是柔性箱和许多元素是 display:flex，可以阻止 float-right的工作。

在某些情况下，像 align-self-end或 ml-auto这样的实用工具类可以对位于像 Bootstrap 4这样的柔性盒容器中的元素进行右对齐。行，卡或导航。ml-auto(左边距: auto)用于弹性框元素中，将元素向右推。

引导程序4对齐正确的例子

小开

根据文档，您可以这样做:

<div class="row">
<div class="col-md-6">left</div>
<div class="col-md-push-6">content needs to be right aligned</div>
</div>

医生

小开

这个怎么样? 鞋带4

<div class="row justify-content-end">
<div class="col-3">
The content is positioned as if there was
"col-9" classed div appending this one.
</div>
</div>
小开

对于 Bootstrap 4，我发现以下内容非常方便，因为:

  • 右边的柱子正好占据了它所需要的空间，并且会向右拉
  • 而左侧的 coll 总是得到最大的空间量。

它是 上校和 Col-auto的结合，这是魔术。因此，您不必定义 colwidth (如 col2，...)

<div class="row">
<div class="col">Left</div>
<div class="col-auto">Right</div>
</div>

理想的对齐文字，图标，按钮，... 到右边。

在小型设备上实现这种响应的一个例子:

<div class="row">
<div class="col">Left</div>
<div class="col-12 col-sm-auto">Right (Left on small)</div>
</div>

检查这个小提琴 https://jsfiddle.net/Julesezaar/tx08zveL/

小开

引导程序4 +

这个密码对我很管用

<div class="row">
<div class="col">
<div class="ml-auto">
this content will be in the Right
</div>
</div>
<div class="col mr-auto">
<div class="mr-auto">
this content will be in the leftt
</div>
</div>
</div>

提交答案