用小屏幕中的图标替换菜单中的文本 bootstrap

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 或跨度或段落中，像这样

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

Answer 2

用 class 的 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

调整大小 window 进行测试。