React Bootstrap调整文本输入的宽度

Question

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

以下是＆＃34; Row＆＃34;：

的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>
      );
  }
}

问题是我想增加＆＃34;输入文本类型的宽度＆＃34;然而，可能不是CSS冠军，我无法增加它。经过一段时间的谷歌搜索和挫折后问这里：）

有人帮忙吗？感谢

Answer 1

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

如上所述here：

  

可能需要自定义宽度：   输入和选择的宽度为：100％;应用的   默认情况下在Bootstrap中。在内联表单中，我们将其重置为宽度：   汽车;所以多个控件可以驻留在同一行上。取决于   你的布局，可能需要额外的自定义宽度。

因此，必须为所有元素提供自定义宽度以调整其宽度，因此我使用了以下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;
}

为我的桌子获得好看的宽度：