如何在div上方添加文本标题？使用label标签出现布局偏移

• 别用<label>加标题，它是表单专属的行内元素，容易打乱Bootstrap的网格布局。
• 在目标row上方加一个占满整行的容器，用Bootstrap的col-12类保证布局正常，不会偏移。

修改后的代码：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <!-- 这里放你要加的标题/文本 -->
  <div class="row">
    <div class="col-12">
      <h3>自定义标题文本</h3>
    </div>
  </div>

  <div class="row">
    <div class="col col-md-1">
      <img src="assets/icons/intercambiar.png" alt="intercambiar" />
    </div>
    <div class="col col-md-4 border border-white border-4" style="background-color: rgb(22, 111, 212); color: white;"> 01-15-12-03
    </div>
    <div class="col col-md-4 border border-white border-4" style="background-color: rgb(255, 255, 255); color: black;">
    </div>
  </div>
</div>

你可以把<h3>换成其他标题标签或者普通<div>，按需调整样式就行，这样布局不会出问题。

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