我对 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 保持一致的最佳实践的指示感兴趣。
最佳答案
从技术上讲,您的两个 col 彼此完美对齐。
由于输入在表单组内,与“清除”按钮相比,它获得了额外的高度。
如果您从代码中删除 label="Filter"
,您可以看到正确的对齐方式。
我现在看到的唯一方法是给按钮一个 margin-top: 25px;
。
这是 Demo
基本上,我为按钮提供了一个自定义类,并在 css 中添加了对齐它所需的边距。
关于css - 与 React-Bootstrap 对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34610156/