머리글 메뉴/navbar의 텍스트를 작은 뷰포트 (레일 4/부트 스트랩 3)의 아이콘으로 바꿉니다.

Question

Rails 4 앱에서 부트 스트랩 3을 사용하고 있습니다.

페이지 머리글에 "정상적인"고정 탐색 표시 줄이 있습니다. 잠시 동안 뷰포트가 작아지면 (작은 장치) 모든 메뉴 제목이 사라지고 여기에 '3 개의 막대'아이콘 (예 : http://getbootstrap.com/examples/navbar-fixed-top/)이 표시됩니다 (작은 화면/뷰포트에서 시도).

부트 스트랩 3에서는 모든 메뉴 제목을이 세 개의 막대 아이콘으로 이동시키지 않고 모든 텍스트를 으로 바꾸려면 매우 작은 아이콘으로 바꾸십시오 (예 : 도움말은 "?"아이콘으로 대체 됨). 뷰포트가 매우 작 으면 모든 공간을 확보 할 수있는 충분한 공간이 있습니다.

부트 스트랩 안에 이미 내장 된 것이 있습니까? 아니면 BS3에서 잘 작동하는 외부 라이브러리일까요?

하드에 안 감사

Answer 1

및 프레임 워크에 대한 필요가 없습니다. BS3에서 제공하는 responsive utility classes을 사용할 수 있습니다. 그 (것)들로, 당신은 큰 스크린에 아이콘을 숨기고 상표를 보여줄 수 있고, 반대는 작은 스크린에 때. 귀하의 navbar 태그는 다음과 같이 보일 것입니다 :

<nav class="navbar navbar-default" role="navigation"> 
    <div class="container-fluid"> 

    <ul class="nav navbar-nav"> 
     <li class="active"><a href="#"> 
     <i class='glyphicon glyphicon-user visible-xs-inline-block'></i> 
     <span class='hidden-xs'>Link</span> 
     </a></li> 
     <li><a href="#"> 
     <i class='glyphicon glyphicon-user visible-xs-inline-block'></i> 
     <span class='hidden-xs'>Link</span> 
     </a></li> 
    </ul> 
    </div> 
</nav> 

과 CSS의 작은 라인은 작은 화면에 block로 표시되는 것을 li을 방지하기 위해 필요합니다. 보여

.nav>li { 
    display: inline-block; 
} 

그리고 예 : http://www.bootply.com/a17IsJ0Pop