ReactStrap：如果我使用 Row 和 Col，组件会相互堆叠

Question

当我不使用行和列时：

<FormGroup>
                          <InputGroup>
                            <InputGroupAddon addonType="prepend">
                              <InputGroupText>
                                Adresse email du client
                              </InputGroupText>
                            </InputGroupAddon>
                            <Input
                              type="email"
                              id="email"
                              name="email"
                              value={this.state.email}
                              onChange={this.onChange}
                              required
                              disabled={
                                this.state.isClientInformationFieldsDisabled
                              }
                            />
                            <InputGroupAddon addonType="append">
                              <InputGroupText>
                                <i className="fa fa-asterisk"></i>
                              </InputGroupText>
                              <Button
                                color="secondary"
                                onClick={this.onClearClientFields}
                                disabled={
                                  this.state.isClientClearFieldsButtonDisabled
                                }
                              >
                                X
                              </Button>
                            </InputGroupAddon>
                            <Button
                              color="primary"
                              onClick={this.onValidateEmailClient}
                              disabled={
                                this.state.isEmailValidateButtonDisabled
                              }
                              style={{ fontWeight: "bold" }}
                            >
                              Valider l'adresse email
                            </Button>
                          </InputGroup>
                        </FormGroup>

当我使用行和列时：

 <FormGroup>
  <InputGroup>
    <Row>
      <Col lg={"12"}>
        <InputGroupAddon addonType="prepend">
          <InputGroupText>
            Adresse email du client
          </InputGroupText>
        </InputGroupAddon>
        <Input
          type="email"
          id="email"
          name="email"
          value={this.state.email}
          onChange={this.onChange}
          required
          disabled={
            this.state.isClientInformationFieldsDisabled
          }
        />
        <InputGroupAddon addonType="append">
          <InputGroupText>
            <i className="fa fa-asterisk"></i>
          </InputGroupText>
          <Button
            color="secondary"
            onClick={this.onClearClientFields}
            disabled={
              this.state
                .isClientClearFieldsButtonDisabled
            }
          >
            X
          </Button>
        </InputGroupAddon>
        <Button
          color="primary"
          onClick={this.onValidateEmailClient}
          disabled={
            this.state.isEmailValidateButtonDisabled
          }
          style={{ fontWeight: "bold" }}
        >
          Valider l'adresse email
        </Button>
      </Col>
    </Row>
  </InputGroup>
</FormGroup>

问题是我正在尝试使用 Col 和 lg,md 道具来控制表单元素的宽度。我有预感，使用 Row 和 Col 会弄乱 FormGroup 的布局。所以我给了它最大宽度，看看它会如何表现，你看到了结果。

如果 Form 的整个宽度仍然是最大宽度 12，我不明白为什么元素会相互堆叠。所以布局应该没有任何变化。

我在尝试向表单添加另一个按钮时遇到了这个问题，事情变得一团糟，所以我尝试使用 Row 和 Col 组件来控制表单的每个元素。

然后就发生了。

对此行为有任何解释吗？

---

编辑 1: 我已经用另一个输入组尝试了 Dimitar Spassov 提到的解决方案：

   <FormGroup>
                              <Container fluid={true}>
                                <Row>
                                  <Col md={"2"} >
                                    <InputGroup >
                                      <InputGroupAddon addonType="prepend">
                                        <InputGroupText>
                                          Numéro de téléphone
                                        </InputGroupText>
                                      </InputGroupAddon>
                                    </InputGroup>
                                  </Col>
                                  <Col md={"9"}>
                                    <InputGroup>
                                      <IntlTelInput
                                        containerClassName="intl-tel-input"
                                        inputClassName="form-control"
                                        style={{ width: "100%" }}
                                        block
                                      />
                                    </InputGroup>
                                  </Col>
                                  <Col md={"1"}>
                                    <InputGroup style={{ height: "100%" }}>
                                      <InputGroupAddon
                                        // style={{ height: "100%" }}
                                        addonType="append"
                                      >
                                        <InputGroupText
                                        // style={{ height: "100%" }}
                                        >
                                          <i className="fa fa-asterisk"></i>
                                        </InputGroupText>
                                      </InputGroupAddon>
                                    </InputGroup>
                                  </Col>
                                </Row>
                              </Container>
                            </FormGroup>

我现在遇到的问题是 phone 数字形式的不同输入组之间存在填充。我正在尝试实现如下表所示的结果。 仍然没有找到一种方法来做到这一点。我添加了

fluid={true}

删除Container external padding（像解释的那样here). But, it made no change. I have also checked the documentation for the InputGroup看看如何删除paddings但是没有结果。

我也尝试过使用 Bootstrap 实用程序 类 删除任何默认填充或边距，但仍然没有任何改变：

 <InputGroup className="ml-0 mr-0 pl-0 pr-0">
                                  <InputGroupAddon addonType="prepend">
                                    <InputGroupText>
                                      Numéro de téléphone
                                    </InputGroupText>
                                  </InputGroupAddon>
                                </InputGroup>

Answer 1

我认为 Row 和 Col 的正确位置不在 InputGroup 内。您可以创建多个 InputGroup 元素并将它们包装在单独的 Col-s 中。这应该允许您控制不同组件的宽度。