为什么我的 div 排序在此 Bootstrap 页面中颠倒了？答案

【问题标题】：Why is my div ordering reversed in this Bootstrap page?为什么我的 div 排序在此 Bootstrap 页面中颠倒了？
【发布时间】：2021-12-11 04:38:40
【问题描述】：

下面我添加了我的 HTML 代码。目前，我最后可以在 UI 中看到 First1 和 First 2，但我的预期输出是 First2 和 First 1。

电流输出：

代码：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">


<div ng-if="item" class="container-fluid" ng-class="item.loaderBorderClass">
    <div ng-if="!item.IsCollapsed" uib-collapse="item.isCollapsed">
        <div class="list-group">          
           <div class="row pull-right">
                <div class="col-md-12">
                    <strong>First 2</strong>
                </div>
            </div>
            <div class="row pull-right">
                <div class="col-md-12">
                    <strong>First 1</strong>
                </div>
            </div>
        </div>
    </div>
</div>

我不确定为什么它在 UI 中看起来像这样。

我知道如果我们交换文本，它会按预期工作，但是有什么理由会这样，因为在代码中 First 2 首先编码，First 1 在第二个编码，但在 UI 中它在 UI 中的显示不同？

【问题讨论】：

交换文本？还是有什么问题？
@Marc 我知道如果我们交换它会按预期工作，但有什么理由会这样，因为在代码中 First 2 首先编码，First 1 编码第二
我猜和 Ekim 给你的答案一样。 pull-right“覆盖”“上一个”元素的位置。将两者都放在一个包装 div 中，然后对齐。
您也可以将.list-group 容器向右拉，订单将被保留。但是，是的。是因为 pull-right 类。

标签： html css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

我认为它首先打印“First 2”，然后将其放在右侧。然后打印“First 1”放在右边（也是First2的左边）。

有多种方法可以解决这个问题。

你可以改变顺序来解决它
在不使用“向右拉”的情况下将它们都对齐到末尾。

Bootstrap Justify-Content d-flex

不要忘记你应该添加 d-flex 以使用 justify-content

这是一个例子；

<div class="d-flex justify-content-end">...</div>

在div 内添加您的col

我希望这会解决。

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。