与 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

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

Answer 2

添加这个。

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

与 React-Bootstrap 对齐

Alignment with React-Bootstrap

css

twitter-bootstrap

reactjs

react-bootstrap