Блог

Я пытаюсь использовать form-floating , чтобы придать плавающей метке вид, но поля путаются, когда я помещаю form-floating класс в а row .

Для сравнения, это без row (этикетка выглядит хорошо):

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

<div class="container">
  <div class="form-floating col-6 mb-3 mt-3 ml-auto">
    <input type="text" class="form-control" id="name">
    <label for="name">Name</label>
  </div>
</div> 

И это с row — обратите внимание, как метка «Имя» теперь касается левой стороны ввода:

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

<div class="container">
  <div class="row">
    <div class="form-floating col-6 mb-3 mt-3 ml-auto">
      <input type="text" class="form-control" id="name">
      <label for="name">Name</label>
    </div>
  </div>
</div> 

В этом минимальном примере, row возможно, не потребуется, но я пытаюсь разместить форму в левом столбце, помещая другое содержимое справа. Как я могу заставить это работать?

Проблема кроется в стилях сетки. Видеть:

 .row {
    /* --bs-gutter-x: 1.5rem; */
    /* bs gutter overwrites the form gutter! */
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(var(--bs-gutter-y) * -1);
    margin-right: calc(var(--bs-gutter-x) * -.5);
    margin-left: calc(var(--bs-gutter-x) * -.5);
}
 

Решение, которое работало в моем браузере:

Перепишите желоба на содержащем вас элементе div обратно в исходное значение.

 <div class="form-floating col-6 mb-3 mt-3 ml-auto gx-1">
  <input type="text" class="form-control" id="name">
  <label for="name">Name</label>
</div>