小さなデバイスでnavbarを変更する

Question

私は最初のブートストラッププロジェクトに取り組んでおり、現在はnavbarを設定しています。

私が欲しいもの：XS modelがアクティブになっているとき（またはwhatsが呼び出されたとき）、ヘッダーのフォントサイズを変更し、navbarの高さを変更して、ヘッダーを左に揃えたいと思う。 そしてすべては、コースのスケールが正しくなければなりません。

これを行う巧妙な方法はありますか？

<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

[OK]を、私は思います私はそれを理解した。

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