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

Question

我有一个带有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%;
   }

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

Answer 1

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

在CSS中对其进行修改，以使该类没有边框。

Answer 2

如果您要使用打字稿解决方案，请使用[ngClass]

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

当navHasBorder分别为true或false时，ngClass动态地在元素上添加或删除ur class。

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

Answer 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）也可能会变化，具体取决于您想要的内容。