Question

如果我有两列布局，我会在第一列使用“pull-right”类（float：right）使其显示在桌面的右侧，但保留在第一个位置（顶部））当列堆叠在移动设备上时。

但是如果我在具有display：flex的列上使用pull-right，它就不会向右拉。它仍然在左边：

<div class="row" style="display:flex;flex-wrap:wrap">

   <div class="col-sm-8 pull-right" style="display:flex">
   First Column
   </div>

   <div class="col-sm-4">
   Second column
   </div>

</div>

如何使用flexbox完成这项工作？

Answer 1

pull-right执行float: right而Flexbox没有。{/ p>

而是使用order: 1或Bootstrap 4's flex-last，在这种情况下，将最后定位。

感谢ZimSystem，看来Bootstrap已将flex-last改写为order-last。

更多关于他们的更新：https://getbootstrap.com/docs/4.0/utilities/flex/

Stack snippet

<div class="row" style="display:flex;flex-wrap:wrap">

   <div class="col-sm-8 pull-right" style="display:flex; order: 1">
   First Column
   </div>

   <div class="col-sm-4">
   Second column
   </div>

</div>

相当于使用flexbox的bootstrap“pull-right”？

1 个答案: