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

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中添加媒体查询，可以完成此操作

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