Bootstrap：边界上的输入标签

bogh5gae 于 2023-01-10 发布在 Bootstrap

关注(0)|答案(2)|浏览(187)

找了很多，什么都没找到-真的只有我一个吗？
我怎么转

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

转换为this（其中标签内嵌/位于边框/描边上）：

难道没有任何prefinebootstrap 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>

谢谢!

twitter-bootstrap

来源：https://stackoverflow.com/questions/61812984/bootstrap-input-labels-on-border

2条答案

按热度按时间

yptwkmov1#

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

赞(0）回复(0）举报 2023-01-10

lg40wkob2#

对于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/
它看起来像这样：

赞(0）回复(0）举报 2023-01-10

我来回答

Bootstrap：边界上的输入标签

2条答案

相关问题

热门标签

最新问答