Выпадающее меню - столбцы внутри

Основная причина, по которой они складываются, заключается в том, что вы используете .col-auto, в то время как .row по умолчанию имеет flex-wrap: wrap;, поэтому каждый столбец будет как можно меньше и обернет их.

Вторая причина заключается в том, что dropdown-menu позиционируется абсолютно, но относительно обертки .dropdown. Поскольку вы разместили оболочку с правой стороны страницы, dropdown-menu не будет увеличиваться в ширину, как вы ожидаете.

Так:

• Не используйте автоматические столбцы, а вместо этого установите max-width на dropdown-menu.
• Снимите обертку <div class = "dropdown"></div>.

Вот пример того, как вы можете сделать свой выпадающий список в Codeply, используя свой макет.

На маленьких экранах столбцы будут складываться с помощью <div class = "row flex-column flex-sm-row">. В каждом столбце фильтра используется список <ul><li>...</li></ul>, содержащий флажки и упрощающий стиль.

<form class = "dropdown-menu p-2 mt-1 overflow-auto">
  <div class = "container-fluid">
    <div class = "row flex-column flex-sm-row">
      <ul class = "col list-unstyled">
        <li>
          <h6 class = "dropdown-header">Dropdown header</h6>
          <hr class = "dropdown-divider">
        </li>
        <li>
          <input class = "form-check-input me-1" type = "checkbox" value = "" id = "first">
          <label class = "form-check-label stretched-link" for = "first">First checkbox</label>
        </li>
        <li>
          <input class = "form-check-input me-1" type = "checkbox" value = "" id = "second">
          <label class = "form-check-label stretched-link" for = "second">Second checkbox</label>
        </li>
        <li>
          <input class = "form-check-input me-1" type = "checkbox" value = "" id = "third">
          <label class = "form-check-label stretched-link" for = "third">Third checkbox</label>
        </li>
      </ul>
      <ul class = "col list-unstyled">
        ...
      </ul>
    </div>
    <div class = "d-flex justify-content-end gap-3">
      <button type = "reset" class = "btn btn-sm btn-warning clear-filter">Clear Filter</button>
      <button type = "submit" class = "btn btn-sm btn-danger">Submit</button>
    </div>
  </div>
</form>

Чтобы сообщить Flex, когда начинать перенос столбцов, установите max-width на dropdown-menu. Например, я установил его на 75vw, но он может быть любой ширины, которую вы хотите. Вместо этого вы можете использовать row-cols-*, но вам придется добавить номер столбца для каждой точки останова, например .row-cols-1 row-cols-sm-2 row-cols-md-4, тогда как установка max-width просто проще в обслуживании и выглядит лучше визуально, когда столбцы будут растягиваться.

Чтобы stretched-link работал , родитель должен иметь position: relative; применяется к нему. И whitespace: nowrap; используется для того, чтобы каждый <label> соответствовал флажку.

form {
 max-width: 75vw;
 max-height: 80vh;
}

.col li {
  position: relative;
  white-space: nowrap;
}

Наконец, чтобы предотвратить закрытие dropdown-menu при взаимодействии с ним, добавьте data-bs-auto-close="outside" на переключатель <button>.