메뉴의 텍스트를 작은 화면의 부트 스트랩 아이콘으로 바꿉니다.

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

랩 각 메뉴 항목처럼, 사업부 또는 기간 또는 단락에 텍스트를 바꿈. 이렇게하면 텍스트가 숨겨지고 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>