col对齐

Question

我正在尝试用2列创建一行.左边的一个col,其内容对齐,第二个col的内容右对齐(old-right).

怎么办我在alpha-6中解决这个问题？

我尝试了一些东西,但这是我到目前为止所做的.我错过了什么？

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

Answer 1

使用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

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

在某些情况下,实用程序类喜欢align-self-end或ml-auto正确对齐Flexbox容器内的元素,如Bootstrap 4 .row,Card或Nav.的ml-auto(保证金左:汽车)在Flexbox的元件用于推动元件到右侧.

Bootstrap 4对齐右边的例子

Answer 2

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

Answer 3

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

• 右侧的列正好占据了所需的空间，将向右拉
• 而左边的col总是会获得最大的空间！。

因此，您不必定义col宽度（例如col-2，...）

<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>