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

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

Answer 1

我不认为你在做什么，这就是 bootstrap 的工作方式，

React bootstrap 使用版本 bootstrap v3，

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

以全屏模式打开代码段

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

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 for good UX.

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