这个按钮如何在可见和隐藏之间切换答案

【问题标题】：How does this button switch bewteen visible and hidden这个按钮如何在可见和隐藏之间切换
【发布时间】：2020-09-22 08:40:43
【问题描述】：

所以我在 Visual Studio 中开始了一个基本的 Angular 5 项目。在其中，它创建了一个名为 nav-menu-component 的组件。它带有标准导航菜单和移动选项，当屏幕小于 726 像素时，它会发生变化。

但是，我试图让移动视图始终成为默认视图（即，我想要一个带有按钮的水平条，无论屏幕宽度如何，它都可以展开和折叠菜单）。但是对于我的生活，我无法弄清楚如何做到这一点。

CSS，尤其是引导程序是我的弱点。如果有人可以帮助解释为什么该按钮只会在屏幕小于 726 像素时出现，请告诉我。我确实知道@media 是如何工作的，但是我至少看到的 ts 或 css 中似乎没有任何东西告诉我这是将按钮从隐藏状态翻转为可见状态。我已经删除了@media(min-width) 但仍然没有显示按钮。

我相信我的 package.json 中的引导版本是 3.4.1

这里是html

        <div class='main-nav'>
          <div class='navbar navbar-inverse'>
            <div class='navbar-header'>
              <button type='button' class='navbar-toggle' data-toggle='collapse' data-target='.navbar-collapse' [attr.aria-expanded]='isExpanded' (click)='toggle()'>
                <span class='sr-only'>Toggle navigation</span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
                <span class='icon-bar'></span>
              </button>
              <a class='navbar-brand' [routerLink]='["/"]'>Codes</a>
            </div>
            <div class='clearfix'></div>
            <div class='navbar-collapse collapse' [ngClass]='{ "in": isExpanded }'>
              <ul class='nav navbar-nav flex-column'>
                <li [routerLinkActive]='["link-active"]' [routerLinkActiveOptions]='{ exact: true }'>
                  <a [routerLink]='["/"]' (click)='collapse()'>
                    <span class='glyphicon glyphicon-home'></span> Home
                  </a>
                </li>
        </ul>
        </div>
      </div>
</div>

css

li .glyphicon {
    margin-right: 10px;
}

.flex-column {
  width: 100%;
}

.navbar {
  padding: 0;
}

.navbar-brand {
  padding: 15px;
}

.navbar-toggler {
  margin-right: 15px;
}

.nav-link {
  padding-left: 16px;
}

/* Highlighting rules for nav menu items */
li.link-active a,
li.link-active a:hover,
li.link-active a:focus {
    background-color: #4189C7;
    color: white;
}

/* Keep the nav menu independent of scrolling and on top of other items */
.main-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

@media (min-width: 768px) {
    /* On small screens, convert the nav menu to a vertical sidebar */
    .main-nav {
        height: 100%;
        width: calc(25% - 20px);
    }
    .navbar {
        border-radius: 0px;
        border-width: 0px;
        height: 100%;
    }
    .navbar-header {
        float: none;
    }
    .navbar-collapse {
        border-top: 1px solid #444;
        padding: 0px;
    }
    .navbar ul {
        float: none;
    }
    .navbar li {
        float: none;
        font-size: 15px;
        margin: 6px;
    }
    .navbar li a {
        padding: 10px 16px;
        border-radius: 4px;
    }
    .navbar a {
        /* If a menu item's text is too long, truncate it */
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }


}

打字稿

import { Component } from '@angular/core';

@Component({
  selector: 'app-nav-menu',
  templateUrl: './nav-menu.component.html',
  styleUrls: ['./nav-menu.component.css']
})
export class NavMenuComponent {
  isExpanded = false;

  collapse() {
    this.isExpanded = false;
  }

  toggle() {
    this.isExpanded = !this.isExpanded;
  }
}

编辑：好的快速更新我已将@media 部分更改为以下内容。但是为什么看起来有两个@media 部分，即使我做了一个查找全部并且只能找到我正在编辑的那个？

@media (min-width: 768px) {
    /* On small screens, convert the nav menu to a vertical sidebar */

    .navbar-collapse.collapse {




    display:none !important;
    }
  .collapse.in {
    display: block !important;
  }

}

【问题讨论】：

标签： html css typescript

【解决方案1】：

媒体查询代码：

@media (min-width: 768px)

正如评论中所说，用于将导航菜单转换为垂直侧边栏，因为您需要导航栏而不是侧边栏，您可以将其完全删除。

在 Bootstrap 3 中，在您需要覆盖 Bootstrap 的默认导航栏行为的整个过程中，让移动视图成为默认视图。

这里有一些例子： Custom less file Simple css override Another css override and a method for bootstrap 4

【讨论】：