html - Bootstrap 在输入组 div 中包装内容

标签 html css input bootstrap-4 formgroups

我有这样的 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 都具有“正常”行为？

最佳答案

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

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

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

关于html - Bootstrap 在输入组 div 中包装内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50830164/

上一篇：php - style.css 不适用于 PHP 文件(不再重复)

下一篇：javascript - 将表格行移动到另一个表格并将其取回

相关文章：

html - 流体布局，div 横跨整个布局的顶部

html - 如何使用 Bootstrap 设置多个元素的宽度？

html - 为什么 Firefox 上的最小高度大于高度？

javascript - 使用 document.getElementById() 更改样式如何与内联但不是内部设置的样式一起使用？

jquery - 如何使导航栏响应？

javascript - 插件 SDK。我如何制作这样的弹出窗口？

python - 输入可以存在于 Python 中定义的函数中吗？

html - 为什么 <img> 和 <p> 元素之间有既不是边距也不是填充的空间？

javascript - 调用元素的 "Click()"方法返回未定义，尽管该元素确实存在

javascript - 在动态创建的表单中添加和删除输入元素

©2024 IT工具网  联系我们