twitter-bootstrap 与 React-Bootstrap 对齐
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/34610156/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Alignment with React-Bootstrap
提问by Roy van der Valk
I am fairly new to React-Bootstrap(and front-end work in general). What is the best practice for aligning elements when using React-Bootstrap?
我对React-Bootstrap（以及一般的前端工作）相当陌生。使用 React-Bootstrap 时对齐元素的最佳实践是什么？
For example:
例如：
<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/
https://jsfiddle.net/f9vdksnu/1/
How do I align the Button component neatly to the Input component? By default the button is aligned to the top.
如何将 Button 组件与 Input 组件对齐？默认情况下，按钮与顶部对齐。
Besides solving this particular issue I am interested in pointers on best practices on aligning with React-Bootstrap.
除了解决这个特定问题之外，我对与 React-Bootstrap 对齐的最佳实践的指针很感兴趣。
采纳答案by Ajey
Technically your both the col are aligned next to each other perfectly.
从技术上讲，您的两个 col 彼此完美对齐。
Since the input is inside the form group, it gets the extra height as compared to the "clear" button.
由于输入在表单组内，与“清除”按钮相比，它获得了额外的高度。
If you remove label="Filter"from your code you can see the proper alignment.
如果您label="Filter"从代码中删除，您可以看到正确的对齐方式。
The only way I see it now is to give a margin-top: 25px;to the button.
我现在看到它的唯一方法是给margin-top: 25px;按钮一个。
Here is the Demo
这是演示
Basically, I gave a custom class to the button and in the css I added the margin I needed to align it.
基本上，我为按钮提供了一个自定义类，并在 css 中添加了对齐它所需的边距。
