navbar의 아이콘에서 라벨로 전환

Question

나는 부트 스트랩 3.1.1을 사용하여 웹 사이트를 만들었으며 접을 수있는 장치를 허용하는 반응 형 디자인을 사용하고 있습니다.

사용 사례는 다음과 같습니다

데스크톱 버전에 대한

1. , 네비게이션 바에 아이콘의 폭에 대한
2. , 드롭 다운이 나타납니다를 표시하는 대신 아이콘의 레이블을 사용해야합니다.

나는 JSBin to replicate the scenario

은 이것에 대한 내장 된 기술이 있는가 만든, 아니면 붕괴가 발생할 때 glyphicon 클래스를 제거하기 위해 jQuery를 이동합니까?

Answer 1

두 div의 내부에 navbar-collapse div을 만듭니다. 하나의 div는 표시 아이콘이고 다른 div는 레이블입니다. div가있는 .visible-xs 클래스를 레이블이 있고 .visible-sm .visible-md .visible-lg 클래스를 데스크톱 버전의 아이콘으로 구성된 div에 사용하십시오. 자세한 내용 확인을 위해

Responsive classes, Bootstrap3

코드 예

<ul class="visible-sm visible-md visible-lg navbar-nav nav"> 
     <li> 
     <a href="#"> 
      <span class="glyphicon glyphicon-home"></span> 
     </a> 
     </li> 
     <li> 
     <a href="#"> 
      <span class="glyphicon glyphicon-question-sign"></span> 
     </a> 
     </li> 
    </ul> 
    <!-- Smaller screen --> 

     <ul class="visible-xs navbar-nav nav "> 
     <li> 
     <a href="#"> 
      <span>Home</span> 
     </a> 
     </li> 
     <li> 
     <a href="#"> 
      <span>Help</span> 
     </a> 
     </li> 
    </ul>