React Bootstrap 调整文本输入的宽度

Posted 2023-02-22

【中文标题】React Bootstrap 调整文本输入的宽度

【英文标题】：React Bootstrap adjust width of text inputs

【发布时间】：2018-03-10 03:55:51

【问题描述】：

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

下面是我的“Row”的 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 冠军，我无法增加它。经过一段时间的谷歌搜索和沮丧之后在这里问:)

有人帮忙吗？谢谢

【问题讨论】：

各位，有什么帮助吗？对于 css 人来说应该很简单:)

【参考方案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;

为我的桌子实现好看的宽度：

【参考方案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
      />

或者您可以简单地将引导网格添加到页面

请参阅下面的链接以了解反应引导网格

React Bootstrap Grid