Bootstrap Обернуть содержимое внутри div-группы ввода - PullRequest
Новая
       8

Bootstrap Обернуть содержимое внутри div-группы ввода

0 голосов
/ 13 июня 2018

У меня есть элементы 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?

1 Ответ

0 голосов
/ 13 июня 2018

Добавить flex: 1;padding-top: 1rem; к этому 

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

У input-group есть дисплей: гибкий на нем.Вот почему его дети занимают только место в соответствии с содержанием.Чтобы они заняли полное пространство, вам нужно добавить 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>
...