소형 장치에서 navbar 수정

Question

첫 번째 부트 스트랩 프로젝트에서 작업 중이며 현재 navbar를 설정 중입니다.

내가 원하는 것 : XS model이 활성화되면 (또는 whats가 호출 될 때) 헤더의 글꼴 크기를 변경하고 탐색 표시 줄의 높이를 변경하고 헤더를 왼쪽으로 정렬하려고합니다. 그리고 모든 것이 제대로 진행되어야합니다.

이렇게하는 영리한 방법이 있습니까 ??

<nav class="navbar navbar-default navbar-fixed-top"> 
    <div style="text-align:center;">   
     <header style="font-size:48px;color:black;"> 
      <a href="/">My Header</a> 
     </header> 
    </div> 
    <div class="container" style="padding:0px;"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav" style="text-transform:uppercase;"> 
       <li><a href="/One">Item 1</a></li> 
       <li><a href="/Two">Item 2</a></li> 
       <li><a href="/Three">Item 3</a></li> 
      </ul> 
     </div> 
    </div> 
</nav> 

Answer 1

당신은 미디어 쿼리를 사용해야합니다, 부트 스트랩 스위치 포인트는 below.The 최소 576 출발점이 될 것입니다, 당신은 여기에 미디어 쿼리를 참조 할 수 있습니다 : http://www.w3schools.com/css/css_rwd_mediaqueries.asp

Bootstrap: 

@media(min-width:576px){} 
@media(min-width:768px){} 
@media(min-width:992px){} 
@media(min-width:1200px){} 

Answer 2

좋아, 내가 생각하는 나는 그것을 알아 냈다.

HTML :

<nav class="navbar navbar-xs navbar-default navbar-fixed-top" style="padding:0px;margin:0px;"> 
    <div class="hidden-xs" style="text-align:center;"> 
     <header style="font-size:48px;"> 
      <a href="/" style="color:black;"> 
       Header 
      </a> 
     </header> 
    </div> 
    <div class="visible-xs pull-left" style="margin:8px;"> 
     <header style="font-size:28px;"> 
      <a href="/" style="color:black;"> 
       Header 
      </a> 
     </header> 
    </div> 
    <div class="container" style="padding:0px;"> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> 
       <span class="sr-only">Toggle navigation</span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
       <span class="icon-bar"></span> 
      </button> 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav" style="text-transform:uppercase;"> 
       <li><a asp-controller="Projects">Projects</a></li> 
       <li><a asp-controller="Visuals">Visuals</a></li> 
       <li><a asp-controller="Now">Now</a></li> 
       <li><a asp-controller="About">About</a></li> 
      </ul> 
     </div> 
    </div> 
</nav> 

CSS :

.navbar .navbar-nav { 
    display: inline-block; 
    float: none; 
} 

.navbar { 
    min-height: 60px; 
} 

.navbar-brand { 
    padding: 0 15px; 
    height: 60px; 
    line-height: 60px; 
} 

.navbar-brand, .navbar-nav li a { 
    line-height: 60px; 
    height: 60px; 
    padding-top: 0; 
} 

.navbar .navbar-collapse { 
    text-align: center; 
} 

.navbar-collapse { 
    max-height:60px; 
} 

.navbar-toggle { 
    margin-right:28px;; 
}