我有一个小问题,我设置了 Bootstrap 导航栏,但是当我将其调整为平板电脑宽度时,菜单会脱离导航栏并进入如下所示的内容:
http://oi57.tinypic.com/2uykv9g.jpg “看到问题”
菜单是否太宽?任何帮助如何解决这个问题将不胜感激。
代码在这里:
<div class="navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="fa fa-bars color-white"></span>
</button>
<a class="navbar-brand" href="index.html" ><img class="img-responsive" src="images/new.jpg"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav" >
<li class="active"><a href="#section-main"><i class="fa fa-home"></i></a></li>
<li><a href="#section-pakiety">Packages</a></li>
<li><a href="#section-works">Examples of webpages</a></li>
<li><a href="#section-about">Our Services</a></li>
<li><a href="#section-korzysci">Benefits</a></li>
<li><a href="#section-ref">References</a></li>
<li><a href="#section-contact">Contact </a></li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</div>
最佳答案
好的,我修复了它,以防万一其他人遇到这个问题,我所做的只是在小于 992px 的设备上将 Logo (这部分是问题)缩小到 80%,给它一个绝对定位等,在这里是CSS:
@navbar-height: 150px;
@navbar-brand-vpadding: 10px;
.navbar-brand img {
height: @navbar-height - @navbar-brand-vpadding * 2;
position: absolute;
top: @navbar-brand-vpadding;
}
@media (max-width: 992px) {
.make-custom-class-here {
width:201px;
height:41px;
}
}
关于css - Bootstrap 导航栏无法在平板电脑上正确显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26674303/