twitter-bootstrap - Bootstrap : Input Labels on border

Question

搜索了很多，找不到任何东西 - 真的只有我一个吗？

我怎么转

<div class="form-group">
   <label for="input1" >Username</label>
      <input type="text" class="form-control" id="input1" value="boern">
</div>

进入this(标签内联/在边框/笔划上):

是否有任何prefined boostrap scss 技巧或类我可以使用而不用像这样弄乱自己的 css(我写的 CSS 越少越好) :

<div class="form-group">
   <label for="input1" style="margin-left: 12px; margin-left: 15px; 
                             margin-top: -12px; position: absolute; 
                             background-color: white; border: 2px solid white;">
      Username
   </label>
   <input type="text"  style="height: 3.3rem;" class="form-control" id="input1" value="boern">
</div>

谢谢!

Answer 1

如果您使用的是 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 是我能想到的最小“原生”大小。也许应该调整标签右侧的间距。