Когда я не использую строки и столбцы:
<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>
Когда я использую строки и 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: Я пробовал решение, упомянутое Димитром Спасовым, с другой группой ввода:
<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}
для удаления внешнего заполнения контейнера (как объяснено здесь ). Но это не изменило. Я также проверил документацию для 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>