我正在尝试使用form-floating来获得浮动标签的外观，但是当我将form-floating类放在<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>（标签看起来不错）：

<代码><；链接href=“ UNK1@5.0.2/dist/CSS/bootstrap.min.CSS ” rel=“ stylesheet ”/>；<；DIV类=“容器”>；<；DIV Class=“ FORM-FLOATING COL-6 MB-3 MT-3 ML-AUTO ”>；<；输入类型=“文本”类=“表单控件” ID=“名称”>；<；label for=“ name ”>；名称<；/label>；<；/DIV>；<；/DIV>；

这是<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>-注意"；名称"；标签现在接触输入的左侧：

<代码><；链接href=“ UNK1@5.0.2/dist/CSS/bootstrap.min.CSS ” rel=“ stylesheet ”/>；<；DIV类=“容器”>；<；DIV类=“ row ”>；<；DIV Class=“ FORM-FLOATING COL-6 MB-3 MT-3 ML-AUTO ”>；<；输入类型=“文本”类=“表单控件” ID=“名称”>；<；label for=“ name ”>；名称<；/label>；<；/DIV>；<；/DIV>；<；/DIV>；

这个最小的示例中，可能不需要<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>，但我尝试将表单放在左列，而将其他内容放在右列。我怎样才能让它工作？

顺晟科技：

问题在于网格样式。参见：

<代码>.行{/*--BS-gutter-X：1.5rem；*//*BS装订线覆盖表单装订线！*/--BS-gutter-y：0；显示：Flex；Flex-Wrap：缠绕；margin-top：calc（var（--BS-gutter-y）*-1）；margin-right：calc（var（--BS-gutter-X）*-.5）；左边距：calc（var（--BS-gutter-X）*-.5）；}

解决方案：

重写回其原始值。

<代码><；DIV类="；形式-浮动COL-6 MB-3 MT-3 ML-AUTO GX-1<；输入类型="；文本"；类="；表单控制"；ID="；名称"；>；<；标签="；名称"；>；名称<；/标签>；<；/DIV>；