bootstrap 网格中的输入高度

Question

我正在使用 Bootstrap 4，但我在处理表单中某些输入字段的高度时遇到了一些问题。表单布局基于 bootstrap 的网格。每个输入都与左侧的标签配对（除非屏幕太小，否则所有表单内容将垂直堆叠）。如果标签足够长，它会被分成多行，但如果发生这种情况，同一行上所有输入的高度都会增加。有一种方法可以用 bootstrap 类来固定输入的高度吗？

备注：我知道如何用CSS修复，我想知道有没有办法只用Bootstrap

一个例子

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>

<body>

  <form>
    <div class="form-group row">
      <label class="col-form-label col-sm-3" for="input1">Label 1</label>
      <div class="input-group col-sm-9">
        <span class="input-group-addon">1</span>
        <input type="text" class="form-control" id="input1">
      </div>
    </div>
    <div class="form-group row">
      <label class="col-form-label col-sm-3" for="input2">Label 2 is very long and could occupy more than 1 row</label>
      <div class="input-group col-sm-9">
        <span class="input-group-addon">2</span>
        <input type="text" class="form-control" id="input2">
      </div>
    </div>
  </form>

  <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>

</html>

在这种情况下，我希望 input2 具有与 input1 相同的高度。

Answer 1

只需从输入周围的列中删除 input-group。

  <div class="form-group row">
    <label class="col-form-label col-sm-3" for="input1">Label 1</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="input1">
    </div>
  </div>
  <div class="form-group row">
    <label class="col-form-label col-sm-3" for="input2">Label 2 is very long and could occupy more than 1 row</label>
    <div class="col-sm-9">
      <input type="text" class="form-control" id="input2">
    </div>
  </div>

Answer 2

只需将 input-group col-sm-* div 拆分为嵌套的 div。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>

<body>

  <form>
    <div class="form-group row">
      <label class="col-form-label col-sm-3" for="input1">Label 1</label>
      <div class="input-group col-sm-9">
        <span class="input-group-addon">1</span>
        <input type="text" class="form-control" id="input1">
      </div>
    </div>
    <div class="form-group row">
      <label class="col-form-label col-sm-3" for="input2">Label 2 is very long and could occupy more than 1 row</label>
      <div class="col-sm-9">
        <div class="input-group">
          <span class="input-group-addon">2</span>
          <input type="text" class="form-control" id="input2">
        </div>
      </div>
    </div>
  </form>

  <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>

</html>

额外垂直对齐 div 和标签类 align-items-* for row divs or align-self-* for col div 可以使用。

bootstrap 网格中的输入高度

Height of inputs in bootstrap grids

bootstrap-4