Bootstrap Flex右侧子项内容无法右对齐，请问问题出在哪？

你用ml-auto只是把右侧的flex子项整体推到了容器的右侧，但子项内部的文本默认还是左对齐的，这就是内容没按预期右对齐的原因。

要让子项里的文本也右对齐，只需要给右侧的div加上Bootstrap的文本右对齐工具类text-right就行，修改后的代码如下：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="d-flex">
    <div class="flex-grow-1">
        Line 1
        <br />Line 2
    </div>
    <div class="ml-auto text-right">
        <strong>Line 3</strong><br/>
        Longer line 4
    </div>
</div>

这样修改后，Line 3和Longer line 4就会和子项的右侧边缘对齐，实现你想要的效果。

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