Question

Bootstrap 4.3.1汉堡包图标（默认的Bootstrap导航栏）不能与浮动在右上角的2个转换按钮结合使用。

如果我评论1个翻译按钮，则会出现汉堡包图标，如果我评论2个，则该图标不可见，但该按钮仍然有效。

将按钮放入容器中，删除所有类和样式并不能解决问题。我正在使用webpack和nodeversion v8.11.3在本地运行网站。 Bootstrap / popper和jquery来自CDN网址。

任何帮助将不胜感激。

<!DOCTYPE html>
    <html lang="en">
    <head>
            <meta charset="UTF-8">
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
    </head>
    <body >
    <div >
      <div class="image-center ">
          <img  src="<%= require('./src/assets/1x/logo.png')%>">
        <div id="en_btn" class="translate_button" lang-selector="EN" style="float:right;" >EN</div>        
          <div id="nl_btn" class="translate_button" lang-selector="NL" style="float:right;" >NL</div>
      </div>
    </div>
      <nav class="navbar navbar-dark navbar-expand-lg bg-dark ">
          <div class="d-lg-none d-xl-none">
        <a href="" class="navbar-brand w-25 ">Brand</a>
        </div>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mainNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse w-100" id="mainNav">
            <ul class="navbar-nav w-100 justify-content-center" id="navElements">
              <li class="nav-item ">
                <a class="nav-link" href="#">Home </a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#teamsection">Team</a>
              </li>
            </ul>
        </div>
    </nav>
      <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
      <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    </body>
    </html>

bootstrap 4导航栏汉堡包图标不可见

0 个答案: