Question

嗨，我有一个基本问题。如何指定长度   引导输入？

在下面的代码中，输入长度太大，我想   它要短一点。

是否有任何引导程序类？当我们加上数字“ 2”时   像form-control2之前的“ form-control”前面，它变短了，但是太短了。

我也尝试更改输入的“大小”属性，但它不起作用   要么。

感谢您的帮助。

import React from "react";

const Test = () => {
  return (
    <div className=" container input-group ">
      <div className="input-group-prepend ">
        <button className="btn btn-danger" type="button">
          Search
        </button>
      </div>
      <input
        type="text"
        className="form-control "
        placeholder="what are you looking for ?"
        aria-label=""
        aria-describedby="basic-addon1"
      />
    </div>
  );
};

export default Test;

Answer 1

在CSS中创建一个新类，在本例中为 length60px ，它指定输入字段的宽度，请务必使用！important。在输入字段的className / class属性上同时使用form-control和new class。

请参见下面的代码；

.form-control{
  max-width:100%;
}

.length60px{
  width:60px !important;
  /*you could also use any number with %; 50%, 100%, etc*/
}

<input class='form-control length60px' />

如何修改boostrap输入长度

1 个答案: