Css 与React引导对齐

我对（和一般的前端工作）相当陌生。使用React引导时，对齐元素的最佳实践是什么

例如：

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

清楚的

如何将按钮组件整齐地与输入组件对齐？默认情况下，按钮与顶部对齐

---

除了解决这个特殊问题之外，我还对使用React Bootstrap的最佳实践的指针感兴趣。

从技术上讲，您的两个列都是完美地相邻对齐的

由于输入位于表单组内，因此与“清除”按钮相比，它会获得额外的高度

如果从代码中删除

label=“Filter”

，则可以看到正确的对齐方式

我现在看到它的唯一方法是给出一个

边距上限：25px到按钮

这是你的电话号码

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

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


请把你的代码放在小提琴里！看谢谢@ajey！最整洁的地方应该在哪里？我可以在Bootstrap React中重写它吗？或者我应该在Bootstrap less/css文件本身中编辑它吗？重写Bootstrap库不是一个好主意。创建您自己的css/less文件，并通过选择器设置按钮样式。谢谢！接受您的答案-不幸的是，无法投票（声誉不够）。