如何解决Bootstrap 5 - 将浮动标签定位在表单控件内,宽度为:自动? 示例 1示例 2
我正在使用 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 没有找到太多。也许只是不可能使输入变小(不是宽度:100%)并使用浮动标签?
解决方法
您可以在不使用自定义 css 的情况下使用 bootstrap flex 行为和网格系统。
示例 1
<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
<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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。