隐藏标签文字

Question

我将bootstrap 5表单浮动应用于输入字段，如何隐藏标签而不显示在输入框之外？

Answer 1

您应该将

.overflow-hidden

添加到您的

div.form-floating

包装纸中。
https://getbootstrap.com/docs/5.3/utilities/overflow/

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-4">
      <div class="form-floating mb-3 overflow-hidden">
        <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
        <label for="floatingInput">Really Long Email address label</label>
      </div>
      <div class="form-floating overflow-hidden">
        <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
        <label for="floatingPassword">Password</label>
      </div>
    </div>
  </div>
</div>