Html 引导：导航栏切换图标在手机上不可见

我正在使用BootstrapV4开发我的web应用程序。对于导航，我正在使用导航栏切换器，在我的桌面（Firefox）上一切正常。然而，当我用手机浏览同一个网站时，在Google Chrome和Firefox Focus上都看不到切换图标。我不知道这是为什么

下面是我的代码片段：

.navbar切换器{
颜色：rgba（0,0,0,5）；
边框颜色：rgba（0,0,0,1）；
}
.navbar切换图标{
背景图像：url（“数据：image/svg+xml；charset=utf8，%3Csvg viewBox='0 30'xmlns='0http://www.w3.org/2000/svg“%3E%3path stroke='rgba（0,0,0,0.5）'stroke width='2'stroke linecap='round'stroke mit='10'd='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E”）；
}

#链接

由于您使用的

.collapse

类，

.collapse

类如下所示：

.collapse {
    display: none;
    visibility: hidden;
}

@media (min-width: 768px)
.navbar-collapse.collapse {
    display: block!important;
    height: auto!important;
    padding-bottom: 0;
    overflow: visible!important;
    visibility: visible!important;
}

---

您的代码非常完美，请添加如下顺序css和jquery

<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

---

我也有同样的问题。按照正确的顺序加载脚本，两个稍有不同的页面，一个是纯html，另一个是动态django页面。按钮在静态页面上显示良好，但在动态页面上，当更改为移动大小时，按钮显示为空白正方形，而不是带有线条的正方形。我尝试了很多不同的事情，脚本顺序，检查标签是否正确终止，戴着驼鹿头摇我的魔法骰子。然后 我将按钮的图标从

    <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>