data-width="100%" 是最直接的写法，使 Bootstrap-select 下拉按钮和菜单撑满父容器宽度，但需确保父容器无 padding 限制且未被 .container 截断宽度，配合 .container-fluid 和 px-0 才能实现真正全宽。
data-width="100%" 是最直接的写法
Bootstrap-select 的 data-width 属性原生支持百分比值，data-width="100%" 会让下拉按钮和下拉菜单都撑满父容器宽度——前提是父容器本身是全宽的。它不依赖 JS 动态计算，也不受选项内容长度干扰，适合表单中需要对齐输入框的场景。
常见错误是把 data-width="100%" 加在 <select> 上却忘了父容器有 padding 或被 .container 限制。检查 computed 样式里该元素的 width 是否真为 100%，如果不是，大概率卡在上层容器的 max-width 里。
- 别混用
data-width="auto"和100%—— 两者逻辑冲突，后者会覆盖前者 - 如果父级用了
.col-6，那 100% 就只是占那一半，不是“视口全宽” - 移动端键盘弹出时，部分安卓 WebView 会临时缩放页面，导致 100% 计算失准；加
viewportmeta 的width=device-width, initial-scale=1可缓解
用 .container-fluid + width: 100% 组合确保真正横跨屏幕
当你要的是“从左边缘到右边缘”的物理全宽（比如顶部搜索栏里的下拉），仅靠 data-width="100%" 不够。必须让父容器脱离 Bootstrap 默认的居中限制：.container-fluid 是唯一官方类，它让 div 宽度为 100vw，左右贴边。
但注意：.container-fluid 只管宽度，不处理内边距。如果它内部还有 .px-3 或 padding，实际内容仍会缩进。真要贴边，得额外加 px-0 或直接写 style="padding: 0"。
-
.container和.container-fluid不能嵌套——后者会失效 - 别用
width: 100vw替代.container-fluid：iOS Safari 在地址栏隐藏/显示时会触发 vw 跳变，造成闪烁 - 若下拉菜单展开后右侧被截断，大概率是
.dropdown-menu的right: 0或left: 0冲突，此时应删掉自定义定位，让 Popper.js 自动计算
移动端下拉菜单宽度被截断的典型原因
即使写了 data-width="100%"，小屏下仍可能只显示半截，常见于以下三种情况：
- 父容器设置了
overflow: hidden（比如轮播组件或卡片），直接裁掉超出部分 - 用了
data-dropup-auto="true"且空间不足时，Popper.js 把菜单翻到上方，但没预留足够顶部空间，导致被body或html截断 - 自定义 CSS 里写了
.bootstrap-select .dropdown-menu { max-width: 300px }这类硬编码，优先级高于data-width
验证方式：在 DevTools 里选中下拉菜单 DOM 节点，看 computed 中 width 和 max-width 哪个生效，再往上逐层查 overflow 和 transform。
超小屏（xs）下宽度适配容易被忽略的细节
data-width 在 xs 断点（class="col-sm-6" 这类带断点的类，它在 xs 下会退化为 col（即 auto 宽度），此时 data-width="100%" 才真正起效。很多人误以为 col-xs-12 还存在——Bootstrap 4+ 已移除 xs 前缀，col 就是 xs 行为。
- 不要写
col-xs-12，它无效；写col-12或直接col - 如果用了
flex-fill或flex-grow-1，它们和data-width="100%"可能打架，建议二选一 - 某些定制主题重写了
.bootstrap-select的display为inline-block，这会导致 100% 失效——强制设display: block即可修复
真正难的不是写对那一行 data-width，而是确认它从 <select> 到 <body> 的每一层容器都没悄悄加限制。动手前先打开 DevTools，盯着 width 和 overflow 看两秒，比试十次更省时间。
