React Bootstrap 调整文本输入的宽度

Question

我正在尝试创建一行，如下所示：

下面是我的“行”的 React 组件代码：

  /*
   * The render method of this component
   */
  render() {
      return (
        <form className="form-inline">
            <FormGroup>
              <InputGroup>
                <InputGroup.Addon>
                <input name="cb" type="checkbox" value={this.state.cb} onChange={this.handleInputChange} />
                </InputGroup.Addon>
                <div>
                <FormControl name="remarks" type="text" value={this.state.remarks} onChange={this.handleInputChange} />
                <FormControl name="amount" type="text" value={this.state.amount} onChange={this.handleInputChange} />
                </div>
              </InputGroup>
            </FormGroup>
        </form>
      );
  }
}

问题是我想增加“输入文本类型”字段的宽度，但可能不是 CSS 冠军，我做不到增加它。经过一段时间的谷歌搜索和沮丧之后在这里问:)

有人帮忙吗？谢谢

Answer 1

是的，我得到了解决方案：

如所述here：

May require custom widths: Inputs and selects have width: 100%; applied by default in Bootstrap. Within inline forms, we reset that to width: auto; so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.

因此，必须为所有元素提供自定义宽度以调整它们的宽度，因此我使用了以下 CSS:

.form-inline {
  width: 100%;
}

.form-group {
  width: 90%;
}

.input-group {
  width: 90% !important;
}

.form-control {
  width: 50% !important;
}

span.input-group-addon {
  width: 50px !important;
}

为我的 table 实现好看的宽度：

Answer 2

您可以将 className='w-50' 添加到 FormControl 组件

      <FormControl
        className="w-50"
        name="remarks"
        type="text"
        value={this.state.remarks}
        onChange={this.handleInputChange}
      />
      <FormControl
        className="w-50"
        name="amount"
        type="text"
        value={this.state.amount}
        onChange={this.handleInputChange}
      />

或者您可以简单地向页面添加 bootstrap 网格

参考下面的 link 来反应 bootstrap grid

React Bootstrap Grid

React Bootstrap 调整文本输入的宽度

React Bootstrap adjust width of text inputs

html

css

reactjs

react-bootstrap