与React-Bootstrap对齐

Question

我对React-Bootstrap(以及一般的前端工作)相当新.使用React-Bootstrap时对齐元素的最佳做法是什么？

例如:

<Grid>
    <Row className="show-grid">
        <Col md={10}>
          <Input type="text" label="Filter"/>
        </Col>
        <Col md={2}>
          <Button>Clear</Button>
        </Col>
      </Row>
</Grid>

https://jsfiddle.net/f9vdksnu/1/

如何将Button组件整齐地对齐到Input组件？默认情况下,按钮与顶部对齐.

除了解决这个特殊问题,我感兴趣的是关于与React-Bootstrap对齐的最佳实践的指针.

Answer 1

从技术上讲,你的两个col完全对齐.

由于输入位于表单组内,因此与"清除"按钮相比,它获得了额外的高度.

如果label="Filter"从代码中删除,则可以看到正确的对齐方式.

我现在看到的唯一方法是给margin-top: 25px;按钮.

这是Demo

基本上,我给按钮一个自定义类,在CSS中我添加了我需要对齐它的边距.