在使用 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;
}