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