如何对齐反应带中的按钮？

Question

我正在ui在 React 中构建一个 Web 应用程序，并将 Reactstrap 用于某些 ui 设计元素。我在行和列中排列了元素。其他一切正常，但按钮元素没有像行中的其他元素那样正确对齐。该按钮略低于其他元素。有人可以告诉我我做错了什么吗？任何帮助，将不胜感激。谢谢。

App.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>

更新

按钮列似乎有某种填充。

文本框没有任何填充

Answer 1

给 3rd 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>

试试这个。

如何对齐反应带中的按钮？

How to align buttons in reactstrap?

reactjs

reactstrap