reactjs 如何使用浮动标签降低输入高度？

cgyqldqp 于 2023-04-05 发布在 React

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

我如何用浮动标签降低输入高度？我试过设置大小，但不起作用。

<Col xs={5} md={2}>
  <FloatingLabel
      size="sm"
      controlId="floatingInput"
      label="Cod do Produto"
      className="mb-2 "
      style={{ fontSize: '14px' }}
  >

    <Form.Control type={"text"}
        size="sm"
        value={InputCodigo}
        name={"Data"}
        onChange={(e) => setInputCodigo(e.target.value)}
        autoComplete={'off'}
        placeholder={"Cod do Produto"} />
  </FloatingLabel>
</Col>

reactjs

来源：https://stackoverflow.com/questions/72391908/how-can-i-decrease-input-height-with-floating-labels

2条答案

按热度按时间

sbdsn5lh1#

你可能需要一些custom CSS，为了保持一致性，它应该是全局应用的。像这样的东西应该可以。它将输入高度从58px减少到42px。

.form-floating>.form-control,
.form-floating>.form-control-plaintext {
  padding: 0rem 0.75rem;
}

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

.form-floating>label {
  padding: 0.5rem 0.75rem;
}

顺便说一句，我为这个解决方案所做的就是检查官方演示和发挥的风格，直到我得到它的工作。

赞(0）回复(0）举报 2023-04-05

wnavrhmk2#

不要忘记在each属性的最后添加！important来覆盖 Bootstrap 的属性：

.form-floating>.form-control,
.form-floating>.form-control-plaintext {
  padding: 0rem 0.75rem !important;
}

.form-floating>.form-control,
.form-floating>.form-control-plaintext,
.form-floating>.form-select {
  height: calc(2.5rem + 2px) !important;
  line-height: 1 !important;
}

.form-floating>label {
  padding: 0.5rem 0.75rem !important;
}

赞(0）回复(0）举报 2023-04-05

我来回答

reactjs 如何使用浮动标签降低输入高度？

2条答案

相关问题

热门标签

最新问答