Bootstrap:下拉选择FORM - 2列

zzzyeukh  于 2023-03-06  发布在  Bootstrap
关注(0)|答案(1)|浏览(200)

我有一个问题。我想在引导下拉选择列表,但有2列。在这一刻,它看起来像这样:

.form-select-vidconvert {
    border-radius: 18px;
}
<div class="row">
<div class="col-md-6 col-md-offset-3">
<select class="form-control form-select-vidconvert">
  
  <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>

我花了2天的时间才弄明白。在互联网上,我发现只有2列下拉菜单(方法从那里不工作的选择列表形式)。我怎么能做到这一点?

kgqe7b3p

kgqe7b3p1#

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

第二个技巧是使用flexflex-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>

相关问题