我对类似问题的解决方案是在bootstrap-select上设置。这是一个非常灵活的 Bootstrap 多选选项。

第二个技巧是使用flex和flex-direction: columns定义列，并使用.divide类（使用optgroup时生成）设置新行。

注意flex列需要固定高度才能正常工作，因此您需要了解每列中有多少元素。

$('.form-select-vidconvert').selectpicker();

.row {
    padding: 8px 20px;
    min-height: 200px
}

.form-select-vidconvert {
    border-radius: 18px;
}

.bootstrap-select > .dropdown-menu {
    height: 160px !important;
    margin-left: 0px;
}

.bootstrap-select > .dropdown-menu.open > .dropdown-menu {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    height: 100%; /* has to be set for the divider to work */
}

.bootstrap-select > .dropdown-menu.open > .dropdown-menu li {
    flex-grow: 0;                
    width: 50%;
}

.bootstrap-select > .dropdown-menu.open > .dropdown-menu li.divider {
    //outline: 1px dotted red; /* debug */
    flex-basis: 100%;
    width: 0;
    height: unset;
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap-theme.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.12.4/dist/css/bootstrap-select.min.css" rel="stylesheet"/>

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.12.4/dist/js/bootstrap-select.min.js"></script>

<div class="row">
<div class="col-md-6 col-md-offset-3">
<select class="form-control form-select-vidconvert" title="Multiselect example with two columns">
  
  <optgroup label="Category 1">
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </optgroup>

  <optgroup label="Category 2">
    <option>1</option>
    <option>2</option>
    <option>3</option>
  </optgroup>

</select>

</div>
</div>