Bootstrap“表单浮动”：标签在“行”内时有奇怪的边距答案

【问题标题】：Bootstrap "form-floating": label has weird margins when inside "row"Bootstrap“表单浮动”：标签在“行”内时有奇怪的边距
【发布时间】：2021-09-21 16:44:33
【问题描述】：

我正在尝试使用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 可能不需要，但我试图将表单放在左列，同时将其他内容放在右侧。我怎样才能让它工作？

【问题讨论】：

标签： javascript html twitter-bootstrap bootstrap-5

【解决方案1】：

问题在于网格样式。见：

.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>

【讨论】：