Bootstrap 将内容包装在输入组中 div

Question

我有 Bootstrap 个像这样的元素：

<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
  <link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>

<body class="bg-light">

  <div class="input-group">
    <span class="input-group-text"><i class="material-icons"> schedule </i></span>
    <div class="form-group">
      <label class="bmd-label-static" for="element"> Element</label>
      <select class="form-control" name="element" id="element" required>
        <option {% ifequal object.element 1 %} selected {% endifequal %}>1</option>
        <option {% ifequal object.element 2 %} selected {% endifequal %}>2</option>
        <option {% ifequal object.element 3 %} selected {% endifequal %}>3</option>
      </select>
    </div>
  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/popper.js@1.12.6/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script>
  <script>
    $(document).ready(function() {
      $('body').bootstrapMaterialDesign();
    });
  </script>
</body>

</html>

重要的部分是 input-group

  <div class="input-group">
    <span class="input-group-text"><i class="material-icons"> schedule </i></span>
    <div class="form-group">
      <label class="bmd-label-static" for="element"> Element</label>
      <select class="form-control" name="element" id="element" required>
        <option {% ifequal object.element 1 %} selected {% endifequal %}>1</option>
        <option {% ifequal object.element 2 %} selected {% endifequal %}>2</option>
        <option {% ifequal object.element 3 %} selected {% endifequal %}>3</option>
      </select>
    </div>
  </div>

问题是它只使用了 space 的一小部分。它将输入元素包装在仅使用的 space 中，导致输入行非常短。

我的想法是，如果我在没有 input-group 或 form-group div 的情况下使用它，它会正常工作。

<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
  <link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>

<body class="bg-light">

  <div class="input-group">
    <span class="input-group-text"><i class="material-icons"> schedule </i></span>
    <select class="form-control" name="element" id="element" required>
      <option {% ifequal object.element 1 %} selected {% endifequal %}>1</option>
      <option {% ifequal object.element 2 %} selected {% endifequal %}>2</option>
      <option {% ifequal object.element 3 %} selected {% endifequal %}>3</option>
    </select>
  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/popper.js@1.12.6/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script>
  <script>
    $(document).ready(function() {
      $('body').bootstrapMaterialDesign();
    });
  </script>
</body>

</html>

我检查了 Chrome 中的开发人员控制台，但我找不到任何会导致此行为的内容。

如何让两个 div 都具有 "normal" 行为？

Answer 1

在此

上添加flex: 1;padding-top: 1rem;

.form-group.bmd-form-group.is-filled {
   flex: 1;
   padding-top: 1rem;
}

input-group 上有 display:flex。这就是为什么它的 children 根据内容只取 space 的原因。要使它们完整 space，您需要向其添加 flex:1，以便元素增长到可用宽度。

.form-group.bmd-form-group.is-filled {
  flex: 1;
  padding-top: 1rem;
}

<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
  <link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>

<body class="bg-light">

  <div class="input-group">
    <span class="input-group-text"><i class="material-icons"> schedule </i></span>
    <div class="form-group">
      <label class="bmd-label-static" for="element"> Element</label>
      <select class="form-control" name="element" id="element" required>
        <option {% ifequal object.element 1 %} selected {% endifequal %}>1</option>
        <option {% ifequal object.element 2 %} selected {% endifequal %}>2</option>
        <option {% ifequal object.element 3 %} selected {% endifequal %}>3</option>
      </select>
    </div>
  </div>

  <!-- Optional JavaScript -->
  <!-- jQuery first, then Popper.js, then Bootstrap JS -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/popper.js@1.12.6/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script>
  <script src="https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script>
  <script>
    $(document).ready(function() {
      $('body').bootstrapMaterialDesign();
    });
  </script>
</body>

</html>

Bootstrap 将内容包装在输入组中 div

Bootstrap Wrap content inside input-group div

html

css

input

bootstrap-4

formgroups