Question

我有一个侧边栏，其中包含图标和菜单名称。一旦屏幕变小然后x数量，侧边栏就会折叠以仅显示图标并隐藏菜单名称。导航栏如下：

<nav id="sidebar" [ngClass]="{active: barActive}">
        <div id="toogleIcon" (click)="onDismiss()">
            <img id="closeIcon" *ngIf="barActive" class="" src="../assets/img/icons/1.svg">
            <span id="menuIcon">
                <img *ngIf="!barActive" class="" src="../assets/img/icons/2.svg">
            </span>
        </div>

        <ul class="list-unstyled components">
            <li routerLinkActive="active">
                <a class="itemMenu" routerLink="/clients">
                    <img class="navItemsSvg" src="../assets/img/icons/A.svg">
                    <span *ngIf="barActive && !islargeDesktop() || islargeDesktop()" class="navTextItem">A</span>
                </a>
            </li>
            <li routerLinkActive="active">
                <a class="itemMenu" routerLink="/users">
                    <img class="navItemsSvg" src="../assets/img/icons/B.svg">
                    <span *ngIf="barActive && !islargeDesktop() || islargeDesktop()" class="navTextItem">B</span>
                </a>
            </li>
            <li routerLinkActive="active">
                <a class="itemMenu" routerLink="/houses">
                    <img class="navItemsSvg" src="../assets/img/icons/C.svg">
                    <span *ngIf="barActive && !islargeDesktop() || islargeDesktop()" class="navTextItem">C</span>
                </a>
            </li>
            <li routerLinkActive="active">
                <a class="itemMenu" routerLink="/devices">
                    <img class="navItemsSvg" src="../assets/img/icons/D.svg">
                    <span *ngIf="barActive && !islargeDesktop() || islargeDesktop()" class="navTextItem">D</span>
                </a>
            </li>
            <li routerLinkActive="active">
                <a class="itemMenu" routerLink="/administration">
                    <img class="navItemsSvg" src="../assets/img/icons/F.svg">
                    <span *ngIf="barActive && !islargeDesktop() || islargeDesktop()" class="navTextItem">F</span>
                </a>
            </li>
        </ul>
    </nav>
    <div id="barPlaceholder"></div>

您可以在这里看到它：

http://jsfiddle.net/36mjqc5v/

我面临的问题是，当边栏折叠时，菜单名称继续显示从边栏溢出。

这似乎与css属性有关。但是我不确定是什么原因造成的。

Answer 1

通过在CSS中添加媒体查询，就可以实现

destRange.setFormulas(resultArray);

当侧边栏折叠为图标时，导航栏文本会溢出

1 个答案: