メニューのテキストを小さな画面のブートストラップのアイコンに置き換えます。

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または段落でテキストを折り返します。これによりテキストが非表示になり、Webサイトがxsデバイスで表示されるときにだけアイコンが表示されます。

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

Working demo on Codepen

それをテストするには、ウィンドウのサイズを変更します。

Answer 2

は隠され-XSのクラスにスパンで（グリフアイコンなし、テキスト）この

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