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

Question

我有一个侧边栏，其中包含图标和菜单名称。一旦屏幕变小，侧边栏就会折叠成只显示图标并隐藏菜单名称。 导航栏如下:

<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中添加media query就可以实现

 @media(max-width:600px) /*specific width*/
    { .navTextItem{display:none;}}