Question

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

这是我的代码段：

＆＃13;

.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");
    }

＆＃13;

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

＆＃13;

Answer 1

由于您正在使用的.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 2

你的代码很完美，请像这样添加顺序css和jquery

AdminNumber  Name
 XXXXXXXXX    Sham
 XXXXXXXXX    Ram

Answer 3

我有同样的问题。脚本以正确的顺序加载，两个略有不同的页面，一个是纯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>

，所以只需将最后一行中的按钮的图标更改为惊人的图标，按钮就会显示出来。快点吧...

Bootstrap：手机无法看到导航栏切换器图标

3 个答案: