导航栏折叠时如何更改类？

Question

在 Web 开发方面，我对 Javascript 还很陌生。我正在使用 bootstrap 构建导航栏。我的导航栏在展开时看起来不错，但在折叠时，设计就乱七八糟了。我的代码看起来像这样

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>E-Commerce</title>

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css">
</head>
<body>

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <a class="navbar-brand" href="">E-Commerce</a>
      <button class="navbar-toggler" 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">
          <li class="nav-item active">
            <a class="nav-link" href="">Home <span class="sr-only">(current)</span></a>
          </li>
        </ul>
        <div class='form-inline my-2 my-lg-0'>
            <a href="" class="btn btn-warning change-style" style="margin-right:5px;">SignUp</a>
            <a href="" class="btn btn-warning change-style">Login</a>
            <a href=""><img id="cart-icon" src="" alt="cart"></a>
            <p id="cart-total">0</p>
        </div>
      </div>
    </nav>



    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
    
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

</body>
</html>

我的自定义样式sheetmain.css有如下代码

#cart-icon {
  width: 25px;
  display: inline-block;
  margin-left: 15px;
}

.bg-dark {
  background-color: #4f868c !important;
}

#cart-total {
  display: block;
  text-align: center;
  background-color: red;
  color: #fff;
  border-radius: 50%;
  font-size: 14px;
  width: 20px;
  height: 25px;
}

当导航栏折叠我的登录时，注册按钮出现在折叠的导航栏菜单内的一行中，但我希望它们显示为单独的导航栏 link，就像主页 link 和松散的一样btn class。我尝试写了下面的js脚本，但是没有达到预期的效果。

var toggleButton = document.getElementsByClassName("navbar-toggler");
toggleButton[0].addEventListener("click", () => {
  var buttons = document.getElementsByClassName("change-style");
  for (i = 0; i < buttons.length; i++) {
    buttons[i].className = "nav-link";
  }
});

有人可以帮忙吗？

Answer 1

你必须确保你的样式是响应式的，你可以为你的类或标签设置一堆额外的样式，一旦它达到特定的高度和宽度。

Answer 2

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="">E-Commerce</a>
  <button class="navbar-toggler" 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">
      <li class="nav-item active">
        <a class="nav-link" href="">Home <span class="sr-only">(current)</span></a>
      </li>
    </ul>
    <div class='form-inline my-2 my-lg-0'>
        <a href="" class="btn btn-warning change-style" style="margin-right:5px;">SignUp</a>
        <a href="" class="btn btn-warning change-style">Login</a>
        <a href=""><img id="cart-icon" src="" alt="cart"></a>
        <p id="cart-total">0</p>
    </div>
  </div>
</nav>

对于CSS

 #cart-icon {
  width: 25px;
  display: inline-block;
  margin-left: 15px;
}

.bg-dark {
  background-color: #4f868c !important;
}

#cart-total {
  display: block;
  text-align: center;
  background-color: red;
  color: #fff;
  border-radius: 50%;
  font-size: 14px;
  width: 20px;
  height: 25px;
}

@media only screen and (max-width: 600px){
  .btn{
    display: block;
    margin-bottom: 1rem;
    float: left;
  }
  
  .form-inline{
    flex-direction: column;
    align-items: flex-start;
  }
}

希望这是你想要的效果。我知道我的回答通常不是 100% 完美，因为我现在正在做的是改变 BOOTSTRAP STYLE 当它来到 ui.

时，这是一个很大的否定

您现在正在做的是您想要使用 bootstrap.Using bootstrap 的帮助来制作导航栏，这将使创建 naybar 变得容易，但很难根据您的需要设置样式。我的建议是了解更多有关 CSS 和 javascript 的基本知识，然后再试一次。

AND 您的 javascript 代码语法不正确。

导航栏折叠时如何更改类？

How to change classes when navbar collapses?

html

javascript

visual-web-developer

django-templates

navbar

导航栏折叠时如何更改 类？

How to change classes when navbar collapses?

html

javascript

visual-web-developer

django-templates

navbar

导航栏折叠时如何更改类？