如果你使用bootstrap 4（我假设是这样），你可以通过混合使用间距类-〉https://getbootstrap.com/docs/4.5/utilities/spacing/来实现“标签在边框上”，而不需要肮脏的内联/自定义CSS：

<div class="form-group">
  <label for="input1" class="col-sm-2">
    <span class="h6 small bg-white text-muted pt-1 pl-2 pr-2">Username</span> 
  </label>
  <input type="text" class="form-control mt-n3" id="input1" value="boern">
</div>

这里最重要的是负.mt-n3余量，如下所示
演示-〉https://jsfiddle.net/nksz9g5e/
也许你想自定义标签的字体大小，.h6 .small是我能想到的最小的“原生”大小。也许标签的右沟应该调整一下。

对于Bootstrap 5，我设法实现了它，如下所示：

<form class="card card-body">
  <div class="row">
      <div class="col px-1 mb-2">
          <label for="input1" class="ms-2 position-absolute" style="margin-top: -0.25rem !important">
              <span class="h6 small bg-white text-muted px-1">Username</span>
          </label>
          <input type="text" class="form-control mt-2" id="input1">
      </div>
      <div class="col px-1 mb-2">
          <label for="input2" class="ms-2 position-absolute" style="margin-top: -0.25rem !important">
              <span class="h6 small bg-white text-muted px-1">Password</span>
          </label>
          <input type="password" class="form-control mt-2" id="input2">
      </div>
  </div>
</form>

如果您在SASS中启用了负边距，则可以省略label标记中的style属性，只需将.mt-n1添加到它的类中。
示范：https://jsfiddle.net/t4cwnxbh/
它看起来像这样：