React中Bootstrap与CSS宽度正确使用问题：表单控件宽度异常

使用React-Bootstrap编写了如下表单代码：

<div className="justify-content-center d-flex">
  <Form>
    <Form.Group className="mb-3">
      <Form.Control
        className="width-400"
        placeholder="E-mail"
        onChange={this.emailHandler}
      />
      {this.state.emailInvalid ? (
        <span className="text-danger">
          Por favor digite um e-mail válido
        </span>
      ) : null}
    </Form.Group>
    <div>
      {this.state.spinner ? (
        <Spinner animation="border" variant="success" />
      ) : (
        <Button
          className="mb-3 width-400"
          onClick={this.sendRecoveryEmail}
          variant="success"
        >
          Recuperar
        </Button>
      )}
    </div>
  </Form>
</div>

对应的CSS：

.width-400 {
  width: 400px;
}

存在的问题：

• 当spinner为false（显示按钮）时，Form.Control能保持400px宽度；
• 当spinner为true（显示加载动画）时，Form.Control会恢复Bootstrap默认的100%宽度，且不想用!important强制生效。

1. 视觉假象：按钮显示时，你以为是width-400类让Form.Control保持400px，实际上是按钮本身的width-400类撑开了父级Form的宽度到400px，此时Form.Control的Bootstrap默认样式width:100%刚好等于400px，和自定义类效果一致，掩盖了优先级问题。
2. CSS优先级冲突：width-400类的优先级和Bootstrap内置的.form-control类相同，如果自定义CSS加载在Bootstrap CSS之前，.form-control的width:100%会覆盖width-400的样式。当Spinner显示时，Spinner宽度远小于400px，Form的宽度收缩，Form.Control的width:100%就跟着变成Form的实际宽度，导致视觉上宽度“缩水”。

方案一：提升自定义类优先级 #

修改CSS选择器，通过类组合提高优先级，确保能覆盖Bootstrap默认样式：

.form-control.width-400 {
  width: 400px;
}

方案二：固定父容器宽度 #

给Form元素添加width-400类，让表单容器本身固定为400px宽度，这样不管内部是按钮还是Spinner，Form.Control的width:100%都会基于400px的父容器生效：

<Form className="width-400">
  {/* 原有内容不变 */}
</Form>

内容的提问来源于stack exchange，提问作者Luis Rotoly