![](/img/trans.png)
[英]Paragraph not responding to 100% width when resizing to less than 600px
[英]How can set navbar width full for mobile-screen(less than 600px) in bootstrap?
在图像(如下图)中,导航栏没有全角。我希望在小屏幕(<600px)中全角。下面给出了相关代码和屏幕截图。我尝试了很多方法但都失败了。
HTML:
<header class="header-area">
<nav class="header-nav navbar">
<div class="container-fluid">
<ul class="nav navbar-nav text-center text-uppercase">
<li><a href="#">About us</a></li>
<li><a href="#">Work</a></li>
<li>
<a href="#">
<img src="images/logo1.png" class="img-responsive" alt="website-logo" style="width: 80px;height:auto;"/>
</a>
</li>
<li><a href="#">Shop</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
</header>
CSS:
header-area {
background: url("images/background1.jpg") no-repeat 0 0 / 100% 100%;
color: #84828D;
padding-bottom: 474px;
}
.header-nav .nav, .header-nav .nav.navbar-nav {
width: 100%;
float: inherit;
}
.header-nav.navbar .nav, .navbar .nav > li {
float: inherit;
display: inline-block;
vertical-align: middle;
}
媒体查询:
@media all and (max-width: 600px) {
.navbar .nav > li {
display: block;
}
.navbar .nav > li img {
margin: auto;
}
}
像这样在您的媒体查询中添加一些行
@media all and (max-width: 600px) {
.container-fluid {
padding:0; /* Extend your menu really full width without padding of container-fluid */
}
.navbar-nav {
margin:0; /* Center your menu with current 100% width available */
}
.navbar .nav > li {
display: block;
}
.navbar .nav > li img {
margin: auto;
}
}
希望有帮助!
跟随bootstrap.css中CSS的原因导致菜单-15px
推送-15px
.navbar-nav {
margin: 7.5px -15px;
}
在媒体查询中以0px
添加以下CSS,以便菜单扩展到容器的全宽
.navbar-nav {
margin: 7.5px 0px;
}
至
@media all and (max-width: 600px) {
.navbar-nav {
margin: 7.5px 0px;
}
.navbar .nav > li {
display: block;
}
.navbar .nav > li img {
margin: auto;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.