我希望在引导选择中有两列,如下所示
我该怎么办?
pkwftd7m1#
你可以在bootstrap-select中使用两列,但是它有一些限制,诀窍是在flex-direction: columns中使用flex来定义列,并使用.divide类(在使用optgroup时生成)来设置一个新行。
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>
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
2条答案
按热度按时间pkwftd7m1#
你可以在
bootstrap-select
中使用两列,但是它有一些限制,诀窍是在flex-direction: columns
中使用flex
来定义列,并使用.divide
类(在使用optgroup
时生成)来设置一个新行。注意flex列需要固定高度才能正常工作,因此您需要了解每列中有多少元素。
trnvg8h32#
这根据设备的尺寸将类似电话的小设备设置为2列,根据屏幕尺寸将“xs”改变为“sm”或“md”或“lg