[英]Modify navbar on small devices
我正在做我的第一个引导项目,目前正在设置导航栏。
我想要的是:激活XS model
(或称为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>
您将需要使用媒体查询,下面是Bootstrap切换点。最小的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){}
好的,我想我已经解决了。
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;;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.