在小设备上修改导航栏

我正在处理我的第一个引导项目，并且正在设置导航栏。在小设备上修改导航栏

我想要什么：当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>

来源

2017-02-11 SteinTheRuler

您将需要使用媒体查询，引导的切换点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){}

来源

2017-02-11 04:20:37

好吧，我想我已经知道了。

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

来源

2017-02-11 05:19:10 SteinTheRuler

在小设备上修改导航栏

回答

相关问题