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

只需从输入周围的col中删除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。

＆＃13;

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

＆＃13;

<强>附加要垂直对齐div和标签，可以使用align-items-* div的row类或align-self-* div的col。

引导网格中输入的高度

2 个答案: