Question

我确实使用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>

这是我唯一得到的输出

Answer 1

将菜单切换到langswitch div之后。

<button class="navbar-toggler">

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

Answer 2

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

但是您也可以在div标记后点击按钮

导航栏（国家图像不响应）

2 个答案: