Bootstrap 3.3.7下拉列表移动端无法内联显示问题求助

我懂你遇到的困扰了——给li加display: inline没效果，核心原因是行内元素（inline）没法自定义宽度，它的宽度完全由内容撑开，自然没法占满屏幕整宽。下面分两种常见场景给你具体解决方案：

场景1：每个下拉选项单独一行，占满屏幕整宽 #

这是下拉列表最常用的布局，只需要把li设置为块级元素，同时强制宽度100%，还要处理盒模型避免溢出：

/* 先确保父容器（比如ul）撑满屏幕宽度 */
.dropdown-list {
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* 让每个li占满整宽，同时优化触摸体验 */
.dropdown-list li {
  display: block;
  width: 100%;
  box-sizing: border-box; /* 确保padding/border不会超出宽度 */
  padding: 12px 16px; /* 增加内边距，让手指更容易点击 */
  border-bottom: 1px solid #eee; /* 可选：添加分隔线区分选项 */
}

另外别忘了在HTML头部添加viewport元标签，这是移动端适配的基础：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

场景2：多个选项内联排列，总宽度占满屏幕 #

如果你想让下拉选项横向排列且整体占满屏幕，可以用Flex布局快速实现：

.dropdown-list {
  display: flex;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}

.dropdown-list li {
  flex: 1; /* 让每个li平分父容器的可用宽度 */
  text-align: center; /* 文本居中提升视觉体验 */
  padding: 12px 8px;
  border: 1px solid #ddd;
}

排查可能的冲突 #

如果还是没效果，检查这几点：

• 父容器有没有设置固定宽度或max-width限制，导致li无法撑满屏幕
• li有没有被其他CSS规则覆盖（比如float、position: absolute），可以用浏览器开发者工具查看元素的最终样式
• 移动端页面有没有开启缩放，确保viewport标签正确设置

内容的提问来源于stack exchange，提问作者Filip Vuskovic