html - Bootstrap : Navbar toggler icon not visible with mobile phone

Question

我正在使用 Bootstrap v4 开发我的 Web 应用程序。对于导航，我使用的是导航栏切换器，在我的桌面 (Firefox) 上一切正常。但是，当我用手机浏览同一个网站时，在 Google Chrome 和 Firefox Focus 上都看不到切换图标。我不知道为什么会这样。

这是我的代码片段:

.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;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(0, 0, 0, 0.5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' 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 btn-block" 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">
                # the links
            </ul>
        </div>
    </nav>



    

Answer 1

我遇到了同样的问题。脚本以正确的顺序加载，两个页面略有不同，一个是纯 html，另一个是动态 django 页面。按钮在静态页面上显示正常，但在动态页面上，当更改为移动尺寸时，按钮显示为空白方 block ，而不是带线条的方 block 。我尝试了很多不同的东西，脚本顺序，检查标签是否正确终止，戴着驼鹿头的时候摇了摇我的魔法骰子。然后我从

更改了按钮的图标

    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <a class="navbar-brand" href="#">Working: Job List</a>
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navmobile" 
                     aria-controls="navmobile" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>

到

<nav class="navbar navbar-expand-lg navbar-light bg-light">
    <a class="navbar-brand" href="#">Working: Job List</a>
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navmobile" 
                     aria-controls="navmobile" aria-expanded="false" aria-label="Toggle navigation">
        <i title="" class="fa fa-bars"></i>
      </button>

所以只需将最后一行中按钮的图标更改为字体精美的图标，按钮就会显示出来。去图....