如何使其导航栏在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 {&nbsp; position: relative;&nbsp; min-height: $navbar-height; // Ensure a navbar always shows (e.g., without a .navbar-brand in collapsed mode)&nbsp; margin-bottom: $navbar-margin-bottom;&nbsp; border: 1px solid transparent;&nbsp; // Prevent floats from breaking the navbar&nbsp; @include clearfix;&nbsp; @media (min-width: $grid-float-breakpoint) {&nbsp; &nbsp; border-radius: $navbar-border-radius;&nbsp; }}

Answer 3

您可以使用媒体查询来实现此目的。例如：@media screen and (min-width: 200px) {  /* change content here */}