如何在bootstrap select中执行两列操作

x6yk4ghg  于 2023-03-06  发布在  Bootstrap
关注(0)|答案(2)|浏览(193)

我希望在引导选择中有两列,如下所示

我该怎么办?

pkwftd7m

pkwftd7m1#

你可以在bootstrap-select中使用两列,但是它有一些限制,诀窍是在flex-direction: columns中使用flex来定义列,并使用.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>
trnvg8h3

trnvg8h32#

<div class="row">
<div class="form-group">
<label class="col-xs-6">option1</label>
<label class="col-xs-6">option2</label>
</div>
</div>

这根据设备的尺寸将类似电话的小设备设置为2列,根据屏幕尺寸将“xs”改变为“sm”或“md”或“lg

相关问题