与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

从技术上讲，你的两个柱子是完美地相邻对齐的。

由于输入位于表单组内，因此与"clear“按钮相比，它获得了额外的高度。

如果从代码中删除label="Filter"，就可以看到正确的对齐方式。

我现在看到它的唯一方式是给按钮一个margin-top: 25px;。

这是Demo

基本上，我为按钮提供了一个自定义类，并在css中添加了所需的页边距来对齐它。

Answer 2

添加这个。

<Row className="align-items-end">