如何使其导航栏在scss中响应？

Question

您好，我在选项卡和移动设备中没有获得响应式标题，如何使其响应。这是html代码.HTML<header><div class="container-fluid">    <div class="logo">        <a href="#"><img src="./assets/images/logo1.png" alt="cstep" class="img1" /></a>        <a href="#"><img src="./assets/images/logo2.png" alt="caps" class="img2" /></a>    </div>    <button class="navbar-toggler" type="button" (click)="isCollapsed = !isCollapsed" [attr.aria-expanded]="!isCollapsed" style="z-index: 1;">    <span class="navbar-toggler-icon"></span></button>    <nav id="main-nav-wrap" style="z-index: 1;">        <ul class="main-navigation">            <li><a href="#intro">Home</a></li>            <li><a href="#about">About</a></li>            <li><a href="#about1">about1</a></li>            <li><a href="#contact">Contact</a></li>            <li><a routerLink='/2019'>2019</a></li>        </ul>    </nav></div>我希望它能够在 scss 中响应，任何帮助将不胜感激。

Answer 1

感谢您的回答，但似乎没有任何效果，因为当我们在移动视图中看到切换按钮不起作用的页面时。

Answer 2

您好，请按照您自己的代码风格进行操作。

.navbar {

  position: relative;

  min-height: $navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)

  margin-bottom: $navbar-margin-bottom;

  border: 1px solid transparent;

  // Prevent floats from breaking the navbar

  @include clearfix;

  @media (min-width: $grid-float-breakpoint) {

    border-radius: $navbar-border-radius;

  }

}

Answer 3

您可以使用媒体查询来实现此目的。

例如：

@media screen and (min-width: 200px) {

  /* change content here */

}