bootstrap 额外的间距在< legend>和< div class="row g-3">之间

5sxhfpxr 于 4个月前发布在 Bootstrap

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

前提条件

我有 searched 来解决重复或已关闭的问题
我有 validated 的任何HTML来避免常见的问题
我读过 contributing guidelines

描述问题

我并不期望这个问题能得到修复，因为当Bootstrap从间距切换到间隙时(参见 #37384),这个问题就会消失。不过，我还是想记录这个问题，这样其他人就能找到它。
有时，多个输入元素应该被组合在一起，例如一个日期和时间输入，或者三个表示日、月、年的下拉框(这些可能不是完美的例子，但你明白我的意思)。
从视觉上讲，将这些输入放在一行是有意义的。从语义上讲，将这些输入放在一个 <fieldset> 是有意义的。现在的问题是： <legend> 在实现垂直间距时(在火狐和Chromium中测试过)不能很好地工作。
这是一个与间距实现相关的问题，因此使用间隙来解决这个问题就可以了。幸运的是，间隙在所有浏览器中对弹性元素都有效，所以我们可以使用 class="g-0 gap-3" 作为解决方法。

简化的测试用例

<fieldset class="mb-3 ">
    <legend class="form-label">Date time</legend><div>
    <div class="row g-3">
        <div class="col-sm">
            <input type="text" name="time" class="form-control">
        </div>
        <div class="col-sm">
            <input type="text" name="date" class="form-control">
        </div>
    </div>
</fieldset>

你在哪款操作系统上看到了这个问题？

Linux

你在哪款浏览器上看到了这个问题？

Firefox

你使用的Bootstrap版本是什么？

Bootstrap

来源：https://github.com/twbs/bootstrap/issues/38479

2条答案

按热度按时间

wn9m85ua1#

间隙实用类优于g-*边距类作为解决方案。
您可以使用div class="row gap-3"代替div class="row g-3"。与负边距不同，这将在列之间添加空间，这应该与legend>元素更好地协同工作。
以下是使用间隙实用类的修改后的代码示例：

`<fieldset class="mb-3">` 
 `<legend class="form-label">Date time</legend>` 
 `<div class="row gap-3">` 
 `<div class="col-sm">` 
 `<input type="text" name="time" class="form-control">` 
 `</div>` 
 `<div class="col-sm">` 
 `<input type="text" name="date" class="form-control">` 
 `</div>` 
 `</div>` 
 `</fieldset>`

通过使用间隙实用类而不是g-*边距类，可以避免负边距的问题，并使legend>元素按预期工作。

赞(0）回复(0）举报 4个月前

uidvcgyl2#

是的，当我们从边距/填充间隙改为间隙时，这将在v6更新中修复。

赞(0）回复(0）举报 4个月前

我来回答