在小屏幕引导程序中用图标替换菜单中的文本

Question

我可以在菜单中的文本旁边添加图标，但无法在小屏幕中隐藏文本（仅保留图标）。

<ul class="nav navbar-nav">
  <li>
     <a asp-area="" asp-controller="Home" asp-action="Index">
        <span class="glyphicon glyphicon-home"></span>
         Home
     </a>
  </li>
  <li><a asp-area="" asp-controller="Home" asp-action="About">About</a></li>
  <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></li>
 </ul>

请帮忙！感谢。

Answer 1

将文字换成div或span或段落，如下

<p class="hidden-xs">some text </p>

Answer 2

用一类hidden-xs包裹每个菜单项（文本，没有字形图标）。这将隐藏文本，仅在xs设备上查看网站时保留图标。

<span class="hidden-xs">Home</span>
<span class="hidden-xs">About</span>
<span class="hidden-xs">Contact</span>

<强> Working demo on Codepen

调整窗口大小以进行测试。