与 React-Bootstrap 对齐

Posted 2023-02-22

【中文标题】与 React-Bootstrap 对齐

【英文标题】：Alignment with React-Bootstrap

【发布时间】：2016-04-09 04:30:03

【问题描述】：

我对@9​​87654321@（以及一般的前端工作）相当陌生。使用 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 保持一致的最佳实践的指针感兴趣。

【问题讨论】：

请把你的代码放在小提琴中！

见jsfiddle.net/f9vdksnu/1

【参考方案1】：

从技术上讲，您的两个 col 完美地对齐。

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

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

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

这里是Demo

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

【讨论】：

感谢@ajey！最整洁的地方应该在哪里？我可以在 Bootstrap-React 中以某种方式覆盖它，还是应该在 bootstrap less/css 文件本身中编辑它？

覆盖引导库不是一个好主意。创建您自己的 css/less 文件并通过选择器设置按钮样式。

谢谢！接受了您的回答 - 不幸的是无法投票（没有足够的声誉）。

【参考方案2】：

添加这个。

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