Bootstrap 在输入组 div 中包装内容答案

【问题标题】：Bootstrap Wrap content inside input-group divBootstrap 在输入组 div 中包装内容
【发布时间】：2018-06-13 06:12:02
【问题描述】：

我有类似这样的 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>

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

如果我在没有 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 都有“正常”的行为？

【问题讨论】：

标签： html css input bootstrap-4 formgroups

【解决方案1】：

在此添加flex: 1;padding-top: 1rem;

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

input-group 上有 display: flex 。这就是为什么它的孩子只根据内容占用空间。要让它们占据全部空间，您需要在其中添加 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>

【讨论】：