Question

我正在尝试创建一个包含2个cols的行。左边有一个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，可以阻止{{1}来自工作。

在某些情况下， float-right 或 align-self-end 等实用程序类可以正确对齐Flexbox容器内的元素，例如Bootstrap 4 .row，Card或Nav。 ml-auto（margin-left：auto）在flexbox元素中用于向右推送元素。

Bootstrap 4 align right examples

Answer 2

这个怎么样？ Bootstrap 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

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

<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

Answer 4

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

右侧的列正好占据了所需的空间，并将向右拉动
而左列始终获得最大的空间！。

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

    ERROR: Bundle PaxelESBNotification [226] Error starting file:/home/ubuntu/Software/service_mix/apache-servicemix-7.0.1/deploy/PaxelESBNotification-0.0.1-SNAPSHOT.jar (org.osgi.framework.BundleException: Unable to resolve PaxelESBNotification [226](R 226.0): missing requirement [PaxelESBNotification [226](R 226.0)] osgi.wiring.package; (osgi.wiring.package=org.json) Unresolved requirements: [[PaxelESBNotification [226](R 226.0)] osgi.wiring.package; (osgi.wiring.package=org.json)])
    org.osgi.framework.BundleException: Unable to resolve PaxelESBNotification [226](R 226.0): missing requirement [PaxelESBNotification [226](R 226.0)] osgi.wiring.package; (osgi.wiring.package=org.json) Unresolved requirements: [[PaxelESBNotification [226](R 226.0)] osgi.wiring.package; (osgi.wiring.package=org.json)]
        at org.apache.felix.framework.Felix.resolveBundleRevision(Felix.java:4132)
        at org.apache.felix.framework.Felix.startBundle(Felix.java:2117)
        at org.apache.felix.framework.Felix.setActiveStartLevel(Felix.java:1371)
        at org.apache.felix.framework.FrameworkStartLevelImpl.run(FrameworkStartLevelImpl.java:308)
        at java.lang.Thread.run(Thread.java:748)

非常适合在右侧对齐文字，图标，按钮...。

在小型设备上做出响应的示例：

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

Answer 5

对于 Bootstrap 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>

col对齐

5 个答案: