引导:导航栏切换器图标在手机上不可见

Question

我正在使用Bootstrap v4开发我的Web应用程序。对于导航，我正在使用导航栏切换器，并且在我的桌面(Firefox(上一切正常。但是，当我用手机浏览同一个网站时，在谷歌浏览器和火狐焦点上，切换图标是不可见的。我不知道这是为什么。

这是我的代码片段：

.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页面。按钮在静态页面上显示正常，但在动态页面上，当更改为移动大小时，按钮显示为空白正方形，而不是带有线条的正方形。我尝试了很多不同的东西，脚本顺序，检查标签正确终止，戴着驼鹿头摇晃我的魔法骰子。然后 我将按钮的图标从

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

因此，只需将最后一行按钮的图标更改为字体真棒图标，按钮就会显示出来。去想办法....

Answer 2

由于您使用的类.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;
}

Answer 3

你的代码是完美的，请像这样添加序列明智的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>