[英]Different height between FormControl and ControlLabel in react-bootstrap
I am making a label + form as follows: 我正在制作如下标签+表格:
<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>
However, it seems like the height of the the ControlLabel
part is different from InputGroup
part, after I added a background-color
as shown in the attached image. 但是,在我添加background-color
之后,似乎ControlLabel
部件的高度与InputGroup
部件不同,如附图所示。 Am I doing something wrong? 难道我做错了什么?
I dont think you are doing anything know, this is how bootstrap works, 我不认为你在做任何事情,这就是bootstrap的工作原理,
React bootstrap uses version bootstrap v3, React bootstrap使用版本引导程序v3,
I have replicated your code example by using plain HTML, CSS and bootstrap v3 CSS. 我通过使用纯HTML,CSS和bootstrap v3 CSS复制了您的代码示例。
Open the snippet in fullscreen mode 以全屏模式打开代码段
In the following example u can see that, there is some space below the label indicated by green background color 在下面的示例中,您可以看到,绿色背景颜色指示的标签下方有一些空间
Horizontal forms should never be used on small devices. 不应在小型设备上使用水平表格。 ie You should use sm instead of xs so that on small screen it becomes vertical form for good UX. 即你应该使用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. ie 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>
react-bootstrap
FormGroup works by adding the form-group
class to the DOM element. react-bootstrap
FormGroup通过将form-group
类添加到DOM元素来工作。 By default, bootstrap
form-group
doesn't mean to support adjacent, row - columns display, you will need to add extra row
class to make it work properly. 默认情况下, bootstrap
form-group
并不意味着支持相邻的行列显示,您需要添加额外的row
类才能使其正常工作。
With bootstrap
only: 仅限bootstrap
:
<div class="form-group row">...</div>
With react-bootstrap
: 使用react-bootstrap
:
<FormGroup className="row">
</FormGroup>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.