标签与其 .input-group 不在同一行 bootstrap 5

Question

  <div class="input-group mb-3">
      <label class="input-group-text form-floating ">Tell us Your Name *</label>
      <input type="text" class="form-control" placeholder="First Name">
      <input type="text" class="form-control" placeholder="Last Name">
   </div>

我的代码是这样的，但我想做的是将标签部分放在输入部分上方并响应。如果你能帮助我，我会很高兴

Answer 1

试试这个代码。它在 html.

中添加行和列语法

<div class="input-group mb-3 row">
  <label class="input-group-text form-floating col-12">Tell us Your Name *</label>
  <input type="text" class="form-control col-6" placeholder="First Name">
  <input type="text" class="form-control col-6" placeholder="Last Name">

这会将标签放在顶部，将输入字段放在标签下方。

标签与其 .input-group 不在同一行 bootstrap 5

Label isn't on the same line as its .input-group bootstrap 5

html

css

bootstrap-5