Bootstrap v4移动端Navbar toggler图标不可见问题求助

我帮你排查了代码里的几个关键点，大概率是这些细节导致了移动端图标不显示，给你几个可行的解决方案：

1. 移除btn-block类的布局干扰 #

你给navbar-toggler按钮加了btn-block类，这个类会强制按钮占满父容器宽度，但Bootstrap的navbar-toggler本身已经适配了移动端布局，叠加这个类可能会挤压图标容器，触发移动端浏览器的布局异常。

修改后的按钮代码：

<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
  <span class="navbar-toggler-icon"></span>
</button>

2. 修复SVG Data URI的编码兼容性问题 #

你自定义的navbar-toggler-icon背景图采用了Data URI格式的SVG，部分移动端浏览器对这类编码的解析存在兼容问题。可以替换为Bootstrap官方标准的编码格式（去掉了可能引发解析错误的charset=utf8,声明）：

替换后的CSS代码：

.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

3. 强制移动端浏览器刷新缓存 #

有时候移动端浏览器会缓存旧的CSS资源，导致新的图标样式无法生效。你可以尝试：

• 长按浏览器刷新按钮，选择「强制刷新」
• 在CSS文件末尾添加版本号（比如style.css?v=1.1），强制浏览器加载最新资源

验证修改后的完整代码 #

整合以上修改后，你的完整代码如下：

.navbar-toggler { 
  color: rgba(0,0,0,.5); 
  border-color: rgba(0,0,0,.1); 
} 
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-sm mb-3">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto justify-content-end w-100">
      <!-- 你的导航链接 -->
    </ul>
  </div>
</nav>

先试试这几个方案，一般移除btn-block和修复SVG编码就能解决问题啦！

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