Bootstrap4 - строка не занимает все пространство

#html #bootstrap-4 #grid-system

#HTML #bootstrap-4 #сетка-система

Вопрос:

Почему правая сторона не занимает всю ширину моего экрана?

Я знаю, что это можно было бы сделать лучше, например, с двумя строками, но таким образом я смог воспроизвести проблему.

На самом деле у меня есть левый и правый с class .col-md-6, который отображается прямо в обрезанном, но неправильном на моем компьютере в Firefox и Chromium.

Я уже пытался удалить кеш, если это произойдет.

Спасибо за любую подсказку.

 <!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>

<body>
  <div class="row">
    <div class="col-12">
      <div id="left_1">left:
        <div id="left_2" class="input-group">
          <div class="row">
            <div class="col-4">
              <div class="form-group">
                <label for="left_col_1">Left col 1</label>
                <input type="text" class="form-control" id="left_col_1">
              </div>
            </div>
            <div class="col-3">
              <div class="form-group">
                <label for="left_col_2">Left col 2</label>
                <input type="number" class="form-control" id="left_col_2">
              </div>
            </div>
            <div class="col-3">
              <div class="form-group">
                <label for="left_col_3">Left col 3</label>
                <input type="text" class="form-control" id="left_col_3">
              </div>
            </div>
            <div class="col-2 input-group-append float-right">
              <button id="left_button" class="btn btn-danger" type="button">X</button>
            </div>
          </div>
        </div>
      </div>
      <button id="left_button_2" type="button" class="btn btn-outline-primary">Add left</button>
    </div>
    <div class="col-12">
      <div id="right_1">right:
        <div id="right_2" class="input-group">
          <div class="row">
            <div class="col-10">
              <div class="form-group">
                <label for="right_col_1">Right col 1</label>
                <input type="text" class="form-control" id="right_col_1">
              </div>
            </div>
            <div class="col-2 input-group-append float-right">
              <button id="right_button" class="btn btn-danger" type="button">X</button></div>
          </div>
        </div>
      </div>
      <button id="right_button_2" type="button" class="btn btn-outline-primary">Add right</button>
    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</body>

</html>

РЕДАКТИРОВАТЬ: похоже, существует проблема с .input-group и .input-group-append . После того, как я удалил их все, все сработало, как ожидалось.

Ответ №1:

Я думаю, это потому, что вы помещаете flexbox в flexbox (класс «input-group» по умолчанию стилизуется как flex, и класс «row» тоже). Если мы удалим просто свойство «display: flex;» в «input-group», работает нормально. На самом деле, обратите внимание, что левая строка тоже занимает не всю ширину — она почти 100%, но не равна. Класс «Row» по умолчанию не имеет свойства width, поэтому, возможно, подсчет ширины каким-то образом основан на дочерних элементах?

Я не думаю, что это лучшее объяснение, но это очень интересное поведение, и было бы здорово, если бы кто-нибудь решил эту проблему лучше, полностью понимая, что происходит с этим flexboxes.

Редактировать:

Также помогает стилизация класса «input-group» с помощью «flex-direction: column;». После этого «строка» отображается как один столбец со 100% шириной — без него она воспринимается только как один из потенциальных столбцов в строке flexbox.