如何调整Bootstrap下拉列表项（dropdown-item）的显示尺寸？

首先你犯了个常见的小错误：在dropdown-item按钮上额外加了btn btn-sm类，这两类样式会冲突，btn自带的内边距、最小宽度等属性会把下拉项撑大，这就是尺寸过大的核心原因。

第一步：清理冗余的类 #

先把下拉项里的btn btn-sm去掉，dropdown-item本身就是专门为下拉菜单项设计的样式，不需要再套按钮类：

<div class="dropdown">
    <button class="btn btn-sm bg-dark btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
         <svg>…</svg><b> EN</b>
     </button>
     <ul class="dropdown-menu">
         <li>
             <button class="dropdown-item" onclick="location.href='index-en.html';">
                 <svg>…</svg><b> FR</b>
             </button>
         </li>
      </ul>
</div>

第二步：调整下拉菜单和项的尺寸 #

如果清理后还是觉得尺寸不合适，用下面两种方法调整：

方法1：用Bootstrap自带工具类（推荐）

直接给dropdown-menu加min-w-0（覆盖默认最小宽度），给dropdown-item加内边距工具类比如px-2 py-1来缩小间距：

<ul class="dropdown-menu min-w-0">
    <li>
        <button class="dropdown-item px-2 py-1" onclick="location.href='index-en.html';">
            <svg>…</svg><b> FR</b>
        </button>
    </li>
</ul>

方法2：自定义CSS（确保优先级）

你的原CSS没生效大概率是选择器优先级不够，用更具体的选择器覆盖Bootstrap默认样式：

/* 缩小下拉菜单最小宽度 */
.dropdown .dropdown-menu {
  min-width: auto; /* 或者设具体值比如80px */
}

/* 调整下拉项的内边距和宽度 */
.dropdown .dropdown-menu .dropdown-item {
  padding: 0.25rem 0.5rem; /* 比默认的0.5rem 1rem更小 */
  width: fit-content; /* 让宽度适配内容，不用100% */
}

这样调整后，下拉项的尺寸就会贴合国旗+语言缩写的内容，不会过度放大了。

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