html - 如何修改 Bootstrap 输入长度

Question

Hi, I have a rudimentary question. How can I specify the length of bootstrap input?

In the code below, the input length is too large, and I want to make it a little bit shorter.

Is there any bootstrap class for it? its seems when we add number "2" in front of "form-control", like form-control2, make it shorter, but it is too short.

I also tried to change "size" attribute of the input and it didn't work either.

thank you for your help.

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{
  max-width:100%;
}

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

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