与React-Bootstrap对齐 [英] Alignment with React-Bootstrap

问题描述

我对

除了解决这个特殊问题外，我还对与React-Bootstrap保持一致的最佳实践感兴趣.

解决方案

从技术上讲，您两个col都完美地彼此对齐.

由于输入位于表单组内部，因此与清除"按钮相比，它具有额外的高度.

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

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

这是演示

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

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?

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/

How do I align the Button component neatly to the Input component? By default the button is aligned to the top.

Besides solving this particular issue I am interested in pointers on best practices on aligning with React-Bootstrap.

解决方案

Technically your both the col are aligned next to each other perfectly.

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.

The only way I see it now is to give a margin-top: 25px; to the button.

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.

这篇关于与React-Bootstrap对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！