Bootstrap中d-inline-flex与flex-row-reverse组合无法正常生效

你当前代码里用了d-inline-flex作为容器类，这个类会让弹性容器以行内元素的形式存在——它的宽度完全由内部子元素的总宽度决定，所以flex-row-reverse只是反转了子项的排列顺序，但容器本身没有占满父容器的宽度，自然没法实现“整体右对齐”的视觉效果。

修复方案 #

把容器的d-inline-flex替换成d-flex，让弹性容器占满父容器的可用宽度，这样flex-row-reverse就能让所有子项整体靠右排列，匹配你的预期效果。

修改后的代码如下：

<p>Use .flex-row-reverse to right-align the direction:</p>
<div class="d-flex flex-row-reverse bg-secondary">
  <div class="p-2 bg-info">Flex item 1</div>
  <div class="p-2 bg-warning">Flex item 2</div>
  <div class="p-2 bg-primary">Flex item 3</div>
</div>

内容的提问来源于stack exchange，提问作者Arup