Bootstrap 4容器文本环绕问题：标题文本无法环绕span元素

嘿，我知道你为啥卡壳了！你给那个右侧的span加了d-flex类，而Flex容器是完全忽略float属性的——这就导致你加的float-right根本没起作用，文本自然没法绕上去。另外还要注意HTML结构的顺序，浮动元素得放在需要环绕的文本前面，不然文本会直接排在浮动元素下方，不会出现环绕效果。

给你两个简单的修复方案：

方案一：调整Flex布局的位置（推荐） #

把d-flex从span移到内部的div上，让span保持能被float的状态：

<div class="row px-3">
  <div class="jumbotron">
    <!-- 先放浮动元素，确保在文本之前 -->
    <span class="float-right">
      <div class="d-flex align-self-center mr-1">
        Submitted by [用户名]
      </div>
    </span>
    <!-- 这里放你的标题/正文文本 -->
    <h1>你的标题内容，现在应该能环绕右侧的提交信息了</h1>
    <p>更多正文内容...</p>
  </div>
</div>

方案二：用shape-outside适配Flex容器（复杂场景用） #

如果一定要保留span的d-flex，可以用CSS的shape-outside属性强制文本环绕，不过这个方案适合复杂形状的环绕，这里其实没必要，但可以参考：

.float-right.d-flex {
  float: right !important;
  shape-outside: inset(0 0 0 0);
}

不过还是方案一更简洁，符合Bootstrap的布局逻辑。

另外要注意：如果你的标题是h1/h2这类默认块级元素，只要浮动元素在HTML结构上先于标题，标题的内容会自动绕开浮动元素；如果还是没效果，检查下jumbotron或row有没有设置overflow: hidden这类会截断浮动的属性，或者有没有其他CSS覆盖了float行为。

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