Как выровнять кнопки в реагирующем ремне? - PullRequest
Новая
       20

Как выровнять кнопки в реагирующем ремне?

1 голос
/ 13 апреля 2020

Я создаю веб-приложение в реаги и использую реактив для определенных элементов дизайна пользовательского интерфейса. Я расположил элементы в строке и столбцах. Все остальное работает нормально, но элемент кнопки не выравнивается должным образом, как остальные элементы в строке. Кнопка чуть ниже других элементов. Может кто-нибудь сказать мне, что я делаю не так? Любая помощь будет оценена. Спасибо.

Приложение. js

              <Container>
              <Row>
                <Col>
                  <text>{item1.Title}</text>
                </Col>
                <Col>
                  <input type="text" onChange={this.handleNameChange}/>
                </Col>
                <Col>
                  <Button onClick={()=>this.handleName(this.state.itemName,item1.Title,item.Title)} color="success" size="sm" >Save</Button>
                </Col>
              </Row>
              </Container>

The resulting effect

ОБНОВЛЕНИЕ

Кажется, что в столбце кнопок есть какие-то отступы.

Button Padding

Текстовое поле не имеет каких-либо отступов enter image description here

1 Ответ

1 голос
/ 13 апреля 2020

присвойте 3-му Col имя className и используйте следующее css: 

.class-col {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    height: 100%;
}

.main-container {
    display: flex;
}

И вы наберете код: 

<Container>
              <Row className="main-container">
                <Col className="class-col">
                  <text>{item1.Title}</text>
                </Col>
                <Col className="class-col">
                  <input type="text" onChange={this.handleNameChange}/>
                </Col>
                <Col className="class-col">
                  <Button onClick={()=>this.handleName(this.state.itemName,item1.Title,item.Title)} color="success" size="sm" >Save</Button>
                </Col>
              </Row>
              </Container>

Дайте эту попытку.

...