[英]Alignment with React-Bootstrap
我对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;
到按钮。
这是演示
基本上,我为按钮提供了一个自定义类,并在 css 中添加了对齐它所需的边距。
加这个。
<Row className="align-items-end">
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.