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

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

Answer 1

我不认为你在做任何事情，这就是bootstrap的工作原理，

React bootstrap使用版本引导程序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. 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> 

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>