Bootstrap 5 - 将浮动标签放置在表单控件内，宽度为：auto？

Question

我正在使用 Bootstrap 5. 我正在尝试将浮动标签与宽度为自动的居中表单控件一起使用，而不是 Bootstrap 的默认值 100%。我不确定如何让浮动标签始终位于输入字段内。我目前有以下表格和相关的 CSS:

    <form action="/login" method="post">
        <div class="form-floating mb-3">
            <input type="text" class="form-control" name="username" id="floatingUsername" placeholder="Username" autocomplete="off" autofocus>
            <label for="floatingUsername">Username</label>
        </div>
        <div class="form-floating mb-3">
            <input type="password" class="form-control" name="password" id="floatingPassword" placeholder="Password" autocomplete="off">
            <label for="floatingPassword">Password</label>
        </div>
        <button class="btn btn-light border" type="submit">Log In</button>
    </form>

main .form-control
{
    /* Center form controls and override 100% width */
    display: inline-block;
    width: auto;
}

main
{
    /* Scroll horizontally*/
    overflow-x: auto;

    text-align: center;
}

这就是它的样子： labels not inside inputs

我试过在 .form-floating、label 等中使用一堆对齐和显示属性。我也试过为标签设置 width:auto，但这也没有改变任何东西。在这里有点不知所措，因为我只有很少的经验，而且浮动标签似乎是股票 Bootstrap 的一个相对较新的补充，所以 Google/SO 没有找到太多。也许只是不可能使输入变小（不是 width:100%）并具有有效的浮动标签？

Answer 1

您可以使用 bootstrap 弹性行为和网格系统，而无需使用自定义 css。

示例 1

和flex behaviors

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="d-flex justify-content-center text-center">
    <form action="/login" method="post">
        <div class="form-floating mb-3">
            <input type="text" class="form-control" name="username" id="floatingUsername" placeholder="Username" autocomplete="off" autofocus>
            <label for="floatingUsername">Username</label>
        </div>
        <div class="form-floating mb-3">
            <input type="password" class="form-control" name="password" id="floatingPassword" placeholder="Password" autocomplete="off">
            <label for="floatingPassword">Password</label>
        </div>
        <button class="btn btn-light border" type="submit">Log In</button>
    </form>
    </div>

示例 2

和Grid system

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
  <div class="row justify-content-center text-center">
<div class="col-md-4">
  <form action="/login" method="post">
    <div class="form-floating mb-3">
      <input type="text" class="form-control" name="username" id="floatingUsername" placeholder="Username" autocomplete="off" autofocus>
      <label for="floatingUsername">Username</label>
    </div>
    <div class="form-floating mb-3">
      <input type="password" class="form-control" name="password" id="floatingPassword" placeholder="Password" autocomplete="off">
      <label for="floatingPassword">Password</label>
    </div>
    <button class="btn btn-light border" type="submit">Log In</button>
  </form>
</div>
  </div>
</div>

Bootstrap 5 - 将浮动标签放置在表单控件内，宽度为：auto？

Bootstrap 5 - Position floating label inside form-control with width: auto?

html

css

forms

floating-labels

bootstrap-5

示例 1

示例 2