react-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>

但是，在我添加了ControlLabel之后，似乎InputGroup部分的高度与background-color部分不同，如所附的图像所示。我在做错什么吗？

Answer 1

我不认为您在做什么，这就是引导程序的工作方式，

反应式引导程序使用版本引导程序v3

我已经使用纯HTML，CSS和bootstrap v3 CSS复制了您的代码示例。

以全屏模式打开代码段

在下面的示例中，您可以看到，绿色背景色指示的标签下方有一些空间

  

绝对不要在小型设备上使用水平表格。即你   应该使用sm而不是xs，以便在小屏幕上将其变成垂直格式以获得良好的用户体验。

.column-color {
  background-color: red;
}

.form-group-color {
  background-color: green;
}

.form-horizontal.centered .control-label {
  margin: 0;
  padding: 0;
  vertical-align: middle;
  line-height: 34px;
}

.centered-flex {
  display: flex;
}

.centered-flex .control-label {
  display: block;
  flex: 1;
  width: 140px;
  padding-right: 10px;
}

.centered-flex .input-group {
  flex: 5;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<form class="form-horizontal">
  <div class="form-group form-group-color">
    <div class="col-xs-2 text-right  column-color">
      <label for="inputEmail3" class="control-label ">Email</label>
    </div>
    <div class="col-xs-10">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Test" aria-describedby="basic-addon2">
        <span class="input-group-addon" id="basic-addon2">km</span>
      </div>
    </div>
  </div>
</form>
<br/>
<p>Horizontal forms should never be used on small devices. i.e. You should use sm instead of xs, so that on small screen it becomes vertical form</p>
<form class="form-horizontal ">
  <div class="form-group form-group-color">
    <div class=" col-sm-2 text-right  column-color">
      <label for="inputEmail3" class="control-label ">Email</label>
    </div>
    <div class="col-sm-10">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Test" aria-describedby="basic-addon2">
        <span class="input-group-addon" id="basic-addon2">km</span>
      </div>
    </div>
  </div>
</form>

<br/>
<p>Vertically Centered using line-height method</p>
<form class="form-horizontal centered">
  <div class="form-group form-group-color">
    <div class=" col-sm-2 text-right  column-color">
      <label for="inputEmail3" class="control-label ">Email</label>
    </div>
    <div class="col-sm-10">
      <div class="input-group">
        <input type="text" class="form-control" placeholder="Test" aria-describedby="basic-addon2">
        <span class="input-group-addon" id="basic-addon2">km</span>
      </div>
    </div>
  </div>
</form>

<p>Centered using flex</p>
<form class="form-horizontal ">
  <div class="form-group form-group-color centered-flex">

    <label for="inputEmail3" class="control-label column-color">Email</label>


    <div class="input-group">
      <input type="text" class="form-control" placeholder="Test" aria-describedby="basic-addon2">
      <span class="input-group-addon" id="basic-addon2">km</span>
    </div>

  </div>
</form>

Answer 2

react-bootstrap FormGroup通过将form-group类添加到DOM元素来工作。默认情况下，bootstrap form-group并不意味着支持相邻的行-列显示，您将需要添加额外的row类以使其正常工作。

仅使用bootstrap：

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

使用react-bootstrap：

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