如何根据屏幕宽度调整Bootstrap下拉列表的宽度与布局？

问题分析 #

核心问题是栅格类使用逻辑错误：Bootstrap采用移动优先的栅格系统，原代码中col-6会在所有屏幕尺寸（包括≤768px的小屏幕）生效，导致两列始终并排；同时自定义的max-width样式和d-inline类进一步限制了布局的响应性，让列无法正常折叠为垂直单列。

解决方案 #

通过以下调整实现需求：

1. 修正栅格类顺序：遵循移动优先原则，小屏幕（≤768px）使用col-12（占满整行），≥768px时切换为col-sm-6（分为两列）。
2. 移除干扰布局的类：删除d-inline、自定义的maxw-240px等破坏栅格流的类。
3. 优化下拉菜单宽度控制：仅在大屏时设置下拉菜单最小宽度，小屏时让其自适应内容宽度，避免强制固定宽度导致布局失效。

修改后的完整代码 #

CSS 部分

/* 大屏（≥768px）时设置下拉菜单最小宽度，保证两列布局空间 */
@media (min-width: 768px) {
  .dropdown-menu.sizefit {
    min-width: 480px;
  }
}

/* 小屏（<768px）时无需强制宽度，让下拉菜单自适应 */
@media (max-width: 767.98px) {
  .dropdown-menu.sizefit {
    width: auto;
  }
}

HTML 部分

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<ul class="dropdown-menu pre-scrollable sizefit" aria-labelledby="menu1">
  <li class="divider border-bottom">
    <div class="row">
      <!-- 小屏占满整行，大屏占半行 -->
      <div class="col-12 col-sm-6">
        <ul>
          <li class="divider border-bottom">
            <a asp-page="./Profile" asp-route-id="@item.Id"
               class="btn btn-sm btn-warning fw-bold border-0 text-start text-dark">
              Profile_1
            </a>
          </li>
          
          <li class="divider border-bottom">
            <a asp-page="./Profile" asp-route-id="@item.Id"
               class="btn btn-sm btn-warning fw-bold border-0 text-start text-dark">
              Profile_2
            </a>
          </li>
        </ul>
      </div>
      
      <!-- 同左侧列的栅格设置 -->
      <div class="col-12 col-sm-6">
        <ul>
          <li class="divider border-bottom">
            <a asp-page="./Edit" asp-route-id="@item.Id"
               class="btn btn-sm btn-warning fw-bold border-0 text-start text-dark">
              Edit
            </a>
          </li>
          
          <li class="divider border-bottom">
            <a asp-page="./Delete" asp-route-id="@item.Id"
               class="btn btn-sm btn-warning fw-bold border-0 text-start text-dark">
              Delete
            </a>
          </li>
        </ul>
      </div>
    </div>
  </li>
</ul>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>

关键修改说明 #

• 栅格类调整：将col-6 col-sm-12改为col-12 col-sm-6，确保小屏幕下列占满整行，大屏时自动分为两列。
• 下拉菜单样式优化：把sizefit类直接绑定到dropdown-menu，避免嵌套容器的宽度干扰；大屏设置min-width:480px保证两列布局空间，小屏用width:auto自适应。
• 移除冗余类：删除d-inline（破坏栅格的块级布局）、mw-240px/maxw-240px（强制固定宽度导致列无法折叠），让Bootstrap栅格系统正常工作。

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