我正在制作如下标签表格：
<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部件不同,如附图所示.难道我做错了什么？
解决方法
我不认为你在做任何事情,这就是bootstrap的工作原理,
React 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>