在小設備上修改導航欄

Question

我正在處理我的第一個引導項目，並且正在設置導航欄。

我想要什麼：當XS model被激活（或稱爲什麼）時，我想更改標題的字體大小，更改導航欄的高度並將標題對齊到左側。 而且一切都必須正確縮放。

有沒有什麼聰明的方法做到這一點？

<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;; 
}