在Reaction-bootstrap中FormControl和ControlLabel之间的高度不同

Question

我正在制作如下标签+表格:

<Form horizontal>
  <FormGroup>
    <Col xs={5} className="xxx">
      <ControlLabel>
        somekey:
      </ControlLabel>
    </Col>
    <Col xs={7} className="yyy">
      <InputGroup>
        <FormControl value="v"/>
        <InputGroup.Button>
          <Button>
            km
          </Button>
        </InputGroup.Button>
      </InputGroup>
    </Col>
  </FormGroup>
</Form>

然而,在添加了附图中所示的a之后,看起来部件的高度与ControlLabel部件不同.难道我做错了什么？InputGroupbackground-color

Answer 1

react-bootstrapFormGroup 的工作原理是将form-group类添加到 DOM 元素。默认情况下，bootstrap form-group并不意味着支持相邻、行-列显示，您需要添加额外的row类才能使其正常工作。

仅与bootstrap：

<div class="form-group row">...</div> 

和react-bootstrap：

<FormGroup className="row">
</FormGroup>