css - 用小屏幕 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 或 span 或段落中，就像这样

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