在使用 react-bootstrap 做出反应时，无法减小带有浮动标签的输入字段（form.control）的大小

Question

我正在尝试降低输入字段（表单控件）的高度。 我正在使用带有表单控件的浮动标签。 我正在使用 react-bootstrap 和 react。 我尝试使用size="sm"来减小大小，并且我也有className="Input-sm" 。 我还根据下面发布的答案将className="input-sm"添加到 Form.Control 中。 但是我无法减小输入字段的大小。

我正在使用 react-bootstrap 中的默认输入字段。 我不是想减小浮动标签文本的大小。 我不是想减小输入字段 Form.Control 的宽度。

下面是输入字段的代码（表单控件）

<FloatingLabel
    controlId="floatingInput"
    label="Last name"
    className="mb-3"
    type="text"
>
    <Form.Control
    size="sm"
    type="text"
    className="Input-sm"
    placeholder="Last name"
    />
</FloatingLabel>

这对我不起作用。 我应该怎么做才能减小输入字段的大小？

Answer 1

在浮动标签的情况下，输入的大小实际上并不由size属性控制，也不是通过手动添加className='form-control-sm' 。 请注意，添加一类input-sm不会做任何我知道的事情。

.form-floating>.form-control {
    padding: 1rem 0.75rem;
}

.form-floating>.form-control, .form-floating>.form-select {
    height: calc(3.5rem + 2px);
    line-height: 1.25;
}
.form-control-sm {
    min-height: calc(1.5em + 0.5rem + 2px);
    /* padding: 0.25rem 0.5rem; Cancelled out by .form-floating */
    font-size: .875rem;
    border-radius: 0.2rem;
}

如果添加.form-control-sm看看 CSS 会发生什么，看起来它只会影响填充，并且被.form-floating类覆盖。 通过!important强制填充只会使输入文本向左对齐，这看起来有点乱。

为了使输入更小，您需要尝试使用高度和行高：

.form-floating>.form-control, .form-floating>.form-select {
    height: calc(3.5rem + 2px);
    line-height: 1.25;
}