如何缩小Bootstrap下拉容器尺寸？代码无效求解决方案

嘿，我懂你想缩小Bootstrap下拉容器尺寸却没成功的郁闷！这事儿其实是因为Bootstrap的下拉菜单自带了默认的内边距和最小宽度限制，咱们得针对性地覆盖这些样式才行。下面给你两种可行的解决方案：

方案一：添加自定义类（推荐，不影响其他下拉菜单） #

先写自定义的CSS样式，记得把这段样式放在Bootstrap CSS之后引入，这样才能覆盖默认样式：

/* 自定义缩小版下拉菜单容器样式 */
.small-dropdown {
  min-width: auto; /* 去掉Bootstrap默认的最小宽度限制 */
  padding: 5px 0; /* 缩小下拉容器的上下内边距 */
}

/* 缩小下拉菜单项的内边距 */
.small-dropdown > li > a {
  padding: 3px 15px; /* 可根据需求调整数值 */
}

然后在HTML的下拉菜单标签里加上这个自定义类：

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">下拉菜单
  <span class="caret"></span></button>
  <!-- 给下拉菜单ul添加自定义类 -->
  <ul class="dropdown-menu small-dropdown">
    <li><a href="#">选项1</a></li>
    <li><a href="#">选项2</a></li>
    <li><a href="#">选项3</a></li>
  </ul>
</div>

方案二：直接覆盖默认类（会影响所有下拉菜单） #

如果你的页面里所有下拉菜单都需要缩小，也可以直接修改Bootstrap的默认类，但要注意这种方式的全局影响：

.dropdown-menu {
  min-width: auto;
  padding: 5px 0;
}

.dropdown-menu > li > a {
  padding: 3px 15px;
}

最后再提醒一句：一定要确保你的自定义CSS在Bootstrap的CSS文件之后加载，不然默认样式会把你的修改覆盖掉，这也是很多人改了没效果的常见原因~

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