如何防止Dropdown切换按钮的自身宽度发生变化

嘿，我懂你遇到的这个糟心问题——点击下拉按钮时它居然会变宽，还自带多余的点击效果，这确实影响体验。咱们直接来搞定它：

问题根源 #

这个情况主要来自两个点：

1. Bootstrap默认给导航链接的:focus/:active状态加了样式，点击时会改变元素的视觉表现甚至布局
2. 按钮没有固定宽度，点击时内部元素的状态变化（比如默认的outline）会导致宽度波动

修复方案 #

只需要调整CSS，再稍微优化下HTML样式，就能实现按钮宽度固定、无点击效果、仅展开下拉菜单的需求：

修改后的CSS

.nav { 
  width: 100%; 
}
.navbar-default .navbar-nav > li > a:focus, 
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:active {
  /* 完全移除点击/悬停的样式变化 */
  color: royalblue !important;
  background-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}
.nav > li { 
  display: inline-block !important; 
}
.number_three_li { 
  float: right; 
}
/* 给下拉按钮设置固定宽度，确保点击前后一致 */
.number_three_li .dropdown-toggle {
  width: 50px;
  text-align: center;
  padding: 15px 0 !important; /* 调整padding，避免宽度受内边距影响 */
}
@media (min-width: 768px) { 
  .navbar-nav > li.number_three_li { 
    float: right; 
  }
}

修改后的HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top" style="background-color: transparent; max-height: 50px;">
  <div class="container-fluid" style="padding-right: 0px;">
    <ul class="nav navbar-nav" style="margin-top: 0px;margin-bottom: 0px;padding-left: 0px;">
      <li class="number_three_li dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          <i class="glyphicon glyphicon-option-horizontal" style="color:royalblue;"></i>
        </a>
        <ul class="dropdown-menu" style="z-index: 3; left: auto; right: 0;">
          <li><a href="#">HTML</a></li>
          <li><a href="#">CSS</a></li>
          <li><a href="#">JavaScript</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>
<p style="padding-top:100px">该问题出现在浏览器宽度 &lt; 768px 时</p>

关键修改说明 #

• 给.dropdown-toggle设置了固定宽度50px，并让图标居中，彻底避免宽度波动
• 完全覆盖了Bootstrap默认的:focus/:active/:hover样式，移除了背景色、outline和阴影，消除所有多余的点击反馈
• 调整了按钮的padding，确保内边距不会影响固定宽度的布局

这样修改后，不管点击多少次，按钮宽度都保持一致，点击时只会展开下拉菜单，不会有任何多余的视觉变化～

内容的提问来源于stack exchange，提问作者David Foie Gras