twitter-bootstrap col 右对齐

col align right

提问by Thibs

I'm trying to create a row with 2 cols. One col on the left with its contents aligned left, and the second col with its contents aligned right (old pull-right).

我正在尝试用 2 列创建一行。左边的一个 col 其内容左对齐，第二个 col 其内容右对齐（旧的 pull-right）。

How to do I go about this in alpha-6?

我如何在 alpha-6 中解决这个问题？

I've tried a few things, but this is what I have so far. What am I missing?

我已经尝试了一些东西，但这是我迄今为止所拥有的。我错过了什么？

<div class="row">
    <div class="col">left</div>
    <div class="col ml-auto">content needs to be right aligned</div>
</div>

回答by Zim

Use float-rightfor block elements, or text-rightfor inline elements:

使用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://www.codeply.com/go/oPTBdCw1JV

http://www.codeply.com/go/oPTBdCw1JV

If float-rightis not working,remember that Bootstrap 4 is now flexbox, and many elements are display:flexwhich can prevent float-rightfrom working.

如果float-right不起作用，请记住Bootstrap 4 现在是 flexbox，并且许多元素都display:flex可以阻止float-right工作。

In some cases, the utility classes like align-self-endor ml-autowork to right align elements that are inside a flexbox container like the Bootstrap 4 .row, Card or Nav. The ml-auto(margin-left:auto) is used in a flexbox element to push elements to the right.

在某些情况下，实用程序类喜欢align-self-end或ml-auto用于右对齐 flexbox 容器内的元素，如 Bootstrap 4 .row、Card 或 Nav。的ml-auto（利润率左：汽车）在Flexbox的元件用于推动元件到右侧。

Bootstrap 4 align right examples

Bootstrap 4 对齐右侧示例

回答by Bexultan Myrzatayev

How about this? Bootstrap 4

这个怎么样？引导程序 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>

回答by Julesezaar

For Bootstrap 4 I find the following very handy because:

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

• the column on the right takes exactly the space it needs and will pull right
• while the left col always gets the maximum amount of space!.

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

So you don't have to define a col width (like col-2,...)

所以你不必定义 col 宽度（如 col-2，...）

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

Ideal for aligning words, icons, buttons,... to the right.

非常适合将文字、图标、按钮...向右对齐。

An example to have this responsive on small devices:

在小型设备上具有此响应的示例：

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

回答by Jordan.J.D

From the documentation, you do it like:

从文档中，您可以这样做：

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

Docs

文档