реагировать на элемент начальной загрузки, не центрируясь - PullRequest
Новая
       2

реагировать на элемент начальной загрузки, не центрируясь

0 голосов
/ 17 апреля 2020

У меня есть "div", который был центрирован по горизонтали, а затем обновлен, чтобы использовать реагировать bootstrap "форма".

Теперь элементы в "форме" не центрированы, появляются слева .. .

enter image description here

render() {
    return (
        <div className="App">
            <div className="App-title">
                Countdown to {this.state.deadline}
            </div>
            <Clock
                deadline={this.state.deadline}
            />
            <Form inline>
                <FormControl 
                    className="Deadline-input"
                    placeholder='new date' 
                    onChange={event => this.setState({newDeadline: event.target.value})}
                />
                <Button onClick={() => this.changeDeadline()}>
                    Submit
                </Button>
            </Form>

        </div>
    )
}

Все в рамках className App 

.App {
text-align: center;
font-size: 35px;
margin-top: 20%;
}

.App-title {
font-size: 50px;
}

.Clock-days,
.Clock-hours,
.Clock-minutes,
.Clock-seconds {
display: inline;
margin: 10px;
}

.Deadline-input {
font-size: 25px;
margin: 5px;
}

Почему оно больше не центрируется? как выровнять мою форму по центру? :]

1 Ответ

3 голосов
/ 17 апреля 2020

Когда вы import 'bootstrap/dist/css/bootstrap.min.css'; bootstrap добавляете некоторые элементы и классы по умолчанию к элементам, из-за этой формы она складывается влево.

Вы можете просто добавить justify-content-center класс к <Form inline />

<Form inline className="justify-content-center">

как это: 

render() {
    return (
        <div className="App">
            <div className="App-title">
                Countdown to {this.state.deadline}
            </div>
            <Clock
                deadline={this.state.deadline}
            />
            // add justify-content-center class to the <Form />
            <Form inline className="justify-content-center">
                <FormControl 
                    className="Deadline-input"
                    placeholder='new date' 
                    onChange={event => this.setState({newDeadline: event.target.value})}
                />
                <Button onClick={() => this.changeDeadline()}>
                    Submit
                </Button>
            </Form>

        </div>
    )
}
...