Bootstrap“form-floating”：标签在“行”内有奇怪的边距

djmepvbi 于 2023-09-28 发布在 Bootstrap

关注(0)|答案(2)|浏览(128)

我试图使用form-floating来获得浮动标签的外观，但是当我将form-floating类放在row中时，边距变得混乱。
为了比较，这是没有row（标签看起来不错）：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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-注意“Name”标签现在如何接触输入的左侧：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/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，但是我尝试将表单放在左列，而将其他内容放在右列。我怎么才能让它工作？

twitter-bootstrap

来源：https://stackoverflow.com/questions/69265379/bootstrap-form-floating-label-has-weird-margins-when-inside-row

2条答案

按热度按时间

p8h8hvxi1#

问题在于网格样式。请参阅：

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

赞(0）回复(0）举报 2023-09-28

ntjbwcob2#

<div class="form-floating col gx-1">
  <input id="Name" required placeholder="Name" class="form-control" />
  <label class="text-muted" for="Name">First name</label>
  <div class="invalid-feedback">Please provide first name</div>
 </div>

赞(0）回复(0）举报 2023-09-28

我来回答

Bootstrap“form-floating”：标签在“行”内有奇怪的边距

2条答案

相关问题

热门标签

最新问答