【发布时间】：2020-07-25 19:44:05
【问题描述】：
当我不使用 Row 和 Col 时：
<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>
当我使用 Row 和 Col 时：
<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 的布局。所以我给了它最大宽度，看看它会如何表现，你看到了结果。
如果表单的整个宽度仍然是最大宽度 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>
我现在遇到的问题是电话号码表单的不同输入组之间存在填充。我正在尝试实现如下形式的结果。 仍然没有找到一种方法来做到这一点。我已经添加了
fluid={true}
删除容器外部填充（如here 解释）。但是，它没有改变。我还检查了InputGroup 的文档以查看是否如何删除填充但没有结果。
我还尝试使用 Bootstrap 实用程序类来删除任何默认填充或边距，但仍然没有任何改变：
<InputGroup className="ml-0 mr-0 pl-0 pr-0">
<InputGroupAddon addonType="prepend">
<InputGroupText>
Numéro de téléphone
</InputGroupText>
</InputGroupAddon>
</InputGroup>
【问题讨论】：
标签： html css reactjs bootstrap-4 reactstrap