如何对齐reactstrap中的按钮？

Posted 2023-03-23

【中文标题】如何对齐reactstrap中的按钮？

【英文标题】：How to align buttons in reactstrap?

【发布时间】：2020-07-26 10:57:55

【问题描述】：

我正在用 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>  

更新

按钮列似乎有某种填充。

文本框没有任何填充

【参考方案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> 

试试这个。

【讨论】：

感谢您的回复。但是，这样做会使按钮进一步向下移动。还有其他想法吗？

仍然无法正常工作。我会更新我的帖子，也许这会有所帮助。

这是按钮的边距，在按钮的类名中将边距设置为0

做到了。谢谢！