如何在Bootstrap Select中实现两列布局？

嘿，刚好之前做过Bootstrap Select的两列布局需求，给你分享两种靠谱的实现方法，都是实际项目里验证过的：

方法一：结合Bootstrap网格系统自定义下拉项内容 #

这种方法适合需要复杂两列内容的场景，比如左侧是名称，右侧是描述/标签之类的。

首先，你的HTML结构要利用Bootstrap Select的data-content属性，插入自定义的网格布局：

<!-- 先确保已引入Bootstrap和Bootstrap Select的CSS/JS -->
<select class="selectpicker" multiple data-live-search="true">
  <option data-content="<div class='row g-0'><div class='col-6 fw-bold'>选项A</div><div class='col-6 text-muted'>产品编号：001</div></div>">选项A</option>
  <option data-content="<div class='row g-0'><div class='col-6 fw-bold'>选项B</div><div class='col-6 text-muted'>产品编号：002</div></div>">选项B</option>
  <option data-content="<div class='row g-0'><div class='col-6 fw-bold'>选项C</div><div class='col-6 text-muted'>产品编号：003</div></div>">选项C</option>
</select>

然后添加一点自定义CSS，修正下拉菜单的默认样式，避免布局错乱：

/* 让下拉菜单内部容器占满宽度 */
.bootstrap-select .dropdown-menu.inner {
  width: 100% !important;
}
/* 让自定义内容的容器占满选项宽度 */
.bootstrap-select .dropdown-menu li a span.text {
  width: 100%;
}
/* 可选：设置下拉菜单的最小宽度，保证两列布局显示正常 */
.bootstrap-select .dropdown-menu {
  min-width: 400px;
}

方法二：纯CSS+自定义属性实现简洁两列布局 #

如果你的两列内容比较简单（比如左侧是选项名，右侧是固定格式的补充信息），可以不用修改每个选项的HTML，用CSS结合自定义属性来实现：

先写基础的HTML：

<select class="selectpicker two-column-select" multiple>
  <option data-side-content="001">选项A</option>
  <option data-side-content="002">选项B</option>
  <option data-side-content="003">选项C</option>
</select>

然后写CSS，把自定义属性里的内容放到右侧：

.two-column-select .dropdown-menu li a {
  position: relative;
  /* 给右侧内容预留足够空间 */
  padding-right: 80px;
}
/* 把data-side-content的内容渲染到右侧 */
.two-column-select .dropdown-menu li a::after {
  content: attr(data-side-content);
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #6c757d;
  font-size: 0.9em;
}

小提示 #

• 如果用的是Bootstrap Select的新版本，记得检查DOM结构，有些默认类名可能有调整，用浏览器开发者工具就能快速定位。
• 单选下拉菜单同样适用这两种方法，只是多选场景下两列布局的需求更常见。
• 调整下拉菜单宽度时，优先用min-width，这样能更好适配不同屏幕尺寸。

内容的提问来源于stack exchange，提问作者Güven Acar