导航栏（国家/地区图像无响应）答案

【问题标题】：Navigation bar (Country image not responsive)导航栏（国家/地区图像无响应）
【发布时间】：2019-04-09 20:53:14
【问题描述】：

我确实使用 html css 实现了响应式导航栏。文本都是响应式的，但我在导航栏中的标志图像中遇到了问题。它没有响应。有人可以帮忙吗？谢谢你。我只希望我的标志图像位于导航栏切换器图标之前而不是导航栏切换器图标之后。这是代码。谢谢。

<!DOCTYPE html>
<html lang="en">

  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Logo Nav - Start Bootstrap Template</title>

    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <script type='text/javascript' src='jquery.particleground.js'></script>
    <script type='text/javascript' src='demo.js'></script>

    <!-- Custom styles for this template -->

    <style type="text/css">

      .logo span {
        height: 50%;
        line-height: 50px;
        float: left;
        color: #fed136;
        font-size:30px;font-weight:700;letter-spacing:0.1em;
        font-family: 'Kaushan Script','Helvetica Neue',Helvetica,Arial,cursive;
      }
      .logo {
        line-height: 50px;
        float: left;
        color: #fff;
        font-size:20px;
        font-family: 'Kaushan Script','Helvetica Neue',Helvetica,Arial,cursive;
        font-weight:700;
        letter-spacing:0.1em;
      }
      body {
        padding-top: 54px;
      }
      @media (min-width: 992px) {
        body {
          padding-top: 56px;
        }
      }
      @media (max-width: 578px){
        .logo {
            font-size: 10px;
        }
      }

    </style>
  </head>

  <body>

    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
      <div class="container">
        <a class="navbar-brand" href="#">
              <div class="logo"><span>FASHION</span><br>CELEBRATE OUR FASHION</div>
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive"aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarResponsive">
          <ul class="navbar-nav ml-auto">
            <li class="nav-item active">
                      <a href="#" class="active nav-link">Home</a>
            </li>
            <li class="nav-item">
                      <a class="nav-link" href="#">INFO</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">STORE</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Contact</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Account</a>
            </li>
               <li class="nav-item">
                    <a class="nav-link" href="#">CART</a>
                 </li>

         </ul>
        </div>
        <div class="langswitch"><a href=""><img class="flag-australia"src="australia.svg" width="30px;"></a>
            <a href=""><img src="south-korea.svg" class="flag-korea"width="30px;"></a>
          </div>
      </div>
    </nav>

    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

  </body>

</html>

这是我只得到的输出

【问题讨论】：

解决这个问题的简单方法是在
之后的

标签： html css bootstrap-4 media-queries

【解决方案1】：

将您的菜单切换移动到 langswitch div 之后。

<button class="navbar-toggler">

.... <div class="langswitch">

【讨论】：

【解决方案2】：

复制标志 div 并将其粘贴在菜单之前（不要忘记给它另一个类）之后让其中一个显示：无（取决于媒体查询屏幕宽度）

但你也可以在标志div之后制作按钮

【讨论】：