引导程序：导航栏图标在手机上不可见

Question

I am working on my web application using Bootstrap v4. For the navigation I'm using the navbar toggler and everything is working fine on my desktop (Firefox). However, when I browse the same website with my mobile phone, on both Google Chrome and Firefox Focus the toggler icon is not visible. I do not know why is that.

Here my code snippet:

 .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

Because of the .collapse class you're using, .collapse class look like this:

.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

Your Code is perfect, Please Add Sequence wise css and jquery like this

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

Answer 3

I had the same problem. Scripts loaded in correct order, two slightly different pages, one pure html, the other a dynamic django page. Button showed fine on the static page, but on the dynamic page, when changing to mobile size, the button showed as a blank square, instead of a square with lines. I tried many different things, script order, checked tags were correctly terminated, shook my magic dice while wearing a moose head. Then I changed my icon for the button from

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

to

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

so just changing the icon to a fontawesome one for the button in the last line, and the button showed. Go figure....