当它成为菜单下拉菜单时，如何删除边框？（角度）答案

【问题标题】：How can I remove border when It becomes a menu dropdown? (Angular)当它成为菜单下拉菜单时，如何删除边框？（角度）
【发布时间】：2020-10-25 10:02:20
【问题描述】：

我有一个包含 3 个“项目”的导航栏。在小屏幕中，这个导航栏变成了一个下拉菜单。在全屏导航栏中，我在“nav-item-1”（第 1 项）中有一个 1px 的边框。当它成为菜单下拉菜单时，如何删除该边框？顺便说一句，我正在使用 Angular 框架和 HTML5、SCSS、TypeScript、Bootstrap 4。我在 header.html 中有这个：


      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav col-10">
          <li class="nav-item-1">
            <a class="nav-link" href="#main">Item 1</a>
          </li>
        </ul>
      </div>

“nav-item-1”边框的我的 scss：


.nav-item-1{
    border-right: 1px solid white;
    font-size: 125%;
   }

当它变成菜单下拉菜单（小屏幕）时，边框仍然存在，而且很难看。当它变成菜单下拉菜单时如何将其删除，但将其保留在“正常”导航栏中？

【问题讨论】：

标签： html css angular bootstrap-4

【解决方案1】：

在 jscript 中创建一个函数，当菜单变为下拉菜单时，它会向项目添加一个类，例如“无边框”（并在菜单恢复正常时将其删除）。

在 CSS 中修改它，使类没有边框。

【讨论】：

我不知道该怎么做，我还是新手...顺便说一句，我正在使用 TypeScript、Bootstrap、HTML5、SCSS。如果你知道如何一步一步地做，你能告诉我吗？

【解决方案2】：

如果您想要 Typescript 解决方案，请使用 [ngClass]

<div [ngClass]="{'nav-item-border': navHasBorder}"></div>

ngClass 在 navHasBorder 分别为 true 或 false 时动态添加或删除元素上的类。

如果您想要更高级的打字稿解决方案，请使用 CDK 的Layout stackblitz

【讨论】：

嗨，它没有用。可能是因为我做错了什么，我对打字稿不太了解......我尝试了一些东西，说属性 isNotSmall$ 在“HeaderComponent”类型上不存在。顺便说一句，只有“nav-item-1”有一个边框“border-right”，这是我在小屏幕上要删除的边框。根据我在问题中显示的代码，您能说/显示我应该如何一步一步地做吗？
isNotSmall$ 您必须在您的 HeaderComponent.ts 文件中创建它请按照我在回答中提供的链接进行操作。一个是 ngClass 的工作方式，一个是布局的工作方式它在 angular ane 中的工作方式是我使用布局为你创建的 stackblitz 示例。

【解决方案3】：

我在另一个问题中找到了我的问题的答案：

Hide or Remove Left Border When Collapsing to Small Screen Using Bootstrap

用途：


@media (max-width:767px) {

      .border
      {
        border:0px solid !important
        }


      }

“.border”可能会改变，取决于类的名称，在我的例子中是“.nav-item-1”。像素数（767px）也可能会改变，这取决于你想要什么。

【讨论】：