如何在Reactstrap中对齐按钮？

Question

我正在React中构建Web应用程序，并对某些ui设计元素使用reactstrap。我已经在行和列中排列了元素。其他所有内容均正常运行，但button元素未像行中的其他元素那样正确对齐。该按钮略低于其他元素。有人可以告诉我我做错了吗？任何帮助，将不胜感激。谢谢。

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

给第三个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> 

尝试一下。