为什么 Bootstrap 5 在 span 标签后添加换行符？答案

【问题标题】：Why does Bootstrap 5 add a line break after a span tag?为什么 Bootstrap 5 在 span 标签后添加换行符？
【发布时间】：2021-06-09 18:43:45
【问题描述】：

有人提出了与此问题类似的问题，但它们没有解决一个非常简单的问题示例。鉴于下面的代码，如果正在使用 Bootstrap 5，将在结束 span 标记之后添加换行符。对于普通 HTML、HTML5 或使用较早版本的 Bootstrap 时，情况并非如此。有谁知道导致这种情况的 Bootstrap 5 发生了什么变化？

通过使用 style="display:inline" 将 span 和后续文本包装在一个段落中，我可以很容易地解决这个问题，但我对这个问题非常好奇。

<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">


<!-- HTML -->
<div class="container" style="width: 100%; height: 100%; border-style: none;">
  <div class="row" style="border-style: solid;">
    <span style="font-weight: bold">Editing User #</span>2, david
  </div>
</div>

【问题讨论】：

标签： html css line-breaks bootstrap-5

【解决方案1】：

因为你把它放在row 中，没有col

<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">


<!-- HTML -->
<div class="container" style="width: 100%; height: 100%; border-style: none;">
  <div class="row" style="border-style: solid;">
    <div class="col">
    <span style="font-weight: bold">Editing User #</span>2, david
    </div>
  </div>
</div>

【讨论】：

非常感谢，劳伦斯！我不知道为什么我看不到。我希望这个问题对其他人有帮助。