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

【问题标题】：Replace text in menu with icon in small screen bootstrap用小屏幕引导程序中的图标替换菜单中的文本
【发布时间】：2017-10-12 11:30:52
【问题描述】：

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

<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>

请帮忙！谢谢。

【问题讨论】：

您能否提供屏幕截图或其他内容或更好地解释预期结果是什么以及当前结果是什么？

标签： css twitter-bootstrap twitter-bootstrap-3 navbar glyphicons

【解决方案1】：

将每个菜单项（文本，不带字形图标）包装在一个带有 hidden-xs 类的 span 中。这将隐藏文本并仅在 xs 设备上查看网站时保留图标。

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

Working demo on Codepen

调整窗口大小进行测试。

【讨论】：

【解决方案2】：

将文本包装在 div 或 span 或段落中，像这样

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

【讨论】：