Bootstrap，让两个元素交换边

Question

我有一段时间以来第一次建立网站 — 自从我上次使用它以来，Bootstrap 似乎发生了一些变化。

所以我有两个像这样的 div:

<div class="one col-lg-6">
    <p>One</p>
</div>

<div class="two col-lg-6">
    <p>Two</p>
</div>

所以Two当然会显示为右栏

以前，如果我想让他们换边，我会简单地将 'One' 浮动到右侧，将 'Two' 浮动到左侧。

但这似乎不再有效（我认为与 Flexbox 有关？）...我读到可以使用设置自动边距代替浮动元素。

但是，我尝试了以下方法，两个 div 都保持原样：

.one {
    margin-left: auto;
}

.two {
    margin-right: auto;
}

是否有无需更改标记的解决方法？

Answer 1

我不知道 bootstrap 是否有原生的解决方案，但你绝对可以使用 flex-direction: row-reverse; 属性解决这个问题。

看看下面的代码片段：

.row-reverse {
  flex-direction: row-reverse;
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="row row-reverse">
  <div class="one col-6">
    <p>One</p>
  </div>

  <div class="two col-6">
      <p>Two</p>
  </div>
</div>

Bootstrap，让两个元素交换边

Bootstrap, getting two elements to swap sides

html

css

css-float

flexbox

twitter-bootstrap