导航栏没有变成汉堡或响应
Posted
技术标签:
【中文标题】导航栏没有变成汉堡或响应【英文标题】：Navbar not turning into a burger or being responsive 【发布时间】：2018-05-10 13:17:58 【问题描述】：我已经尝试自定义我的导航栏，我已经从引导站点复制了 3.0 的基本导航栏。现在，我的导航没有变成汉堡导航，我用于导航棒的自定义背景图像，标志棒，但导航按钮消失了。我假设它们会在背景图像下方或屏幕外变成汉堡。
.navbar
background: url(../images/mainnav.png) no-repeat top center;
border-radius: 0;
border: 0;
height: 100px;
width: 980px;
margin: 0 auto;
display: block;
.navspace
padding: 30px 46px 30px 46px;
.navposition
margin-left: 100px;
.navbar-brand
padding: 0;
position: relative;
left: 40px;
top: 10px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container nopadding">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data- toggle="collapse" data-target="bs-example-navbar-collapse-1" aria- expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>max-width: 100%
<a class="navbar-brand" href="#"><img src="images/logo.png" ></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -
->
<div class="collapse navbar-collapse" id="bs-example-navbar-
collapse-1">
<ul class="nav navbar-nav">
</ul>
</li>
</ul>
<ul class="nav navbar-nav navposition">
<li class="navspace"><a href="#">Home</a></li>
<li class="navspace"><a href="#">Menu</a></li>
<li class="navspace"><a href="#">Location</a></li>
<li class="navspace"><a href="#">Contact Us</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="row">
<div class="col-sm-12 banner ">
<p>10% off all pizzas
<br>this weekend only</p>
<h1>LIMITED TIME<br>ONLY</h1>
</div>
</div>
<div class="row thumbnails">
<div class="col-sm-offset-1 col-sm-3">
<img src="images/bodyimg.png" >
</div>
<div class="col-sm-offset-1 col-sm-3"></div>
<div class="col-sm-offset-1 col-sm-3"></div>
</div>
<div class="row">
<div class="col-sm-offset-1 col-sm-3"></div>
<div class="col-sm-offset-1 col-sm-3"></div>
<div class="col-sm-offset-1 col-sm-3"></div>
</div>
<div class="row">
<div class="col-sm-12"></div>
</div>
</div>【问题讨论】：
检查this可能有帮助 那是什么？</button>max-width: 100%
【参考方案1】：
您的 html 存在很多问题。一些元素被注释掉了，多余的结束标签如</li>或</ul>，你的html中还有max-width:100%。那里没有生意。
关于您的问题，问题在于您设置了.navbar width:980px ，因此当您在小于980px 的屏幕上时，并非所有.navbar 都可见（导航栏的右侧不适合在屏幕内）所以汉堡菜单在那里但不可见，因为navbar 比屏幕大
如果您希望您的 .navbar 为 980 像素但也具有响应性（屏幕较小时缩放），请使用 max-width:980px
见下文
.navbar
background: url(../images/mainnav.png) no-repeat top center;
border-radius: 0;
border: 0;
height: 100px;
max-width: 980px;
margin: 0 auto;
display: block;
.navspace
padding: 30px 46px 30px 46px;
.navposition
margin-left: 100px;
.navbar-brand
padding: 0;
position: relative;
left: 40px;
top: 10px;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="container nopadding">
<nav class="navbar navbar-default navbar-static-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data- toggle="collapse" data-target="bs-example-navbar-collapse-1" aria- expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><img src="images/logo.png" ></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -
->
<div class="collapse navbar-collapse" id="bs-example-navbar-
collapse-1">
<ul class="nav navbar-nav">
</ul>
</li>
</ul>
<ul class="nav navbar-nav navposition">
<li class="navspace"><a href="#">Home</a></li>
<li class="navspace"><a href="#">Menu</a></li>
<li class="navspace"><a href="#">Location</a></li>
<li class="navspace"><a href="#">Contact Us</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
<div class="row">
<div class="col-sm-12 banner ">
<p>10% off all pizzas
<br>this weekend only</p>
<h1>LIMITED TIME<br>ONLY</h1>
</div>
</div>
<div class="row thumbnails">
<div class="col-sm-offset-1 col-sm-3">
<img src="images/bodyimg.png" >
</div>
<div class="col-sm-offset-1 col-sm-3"></div>
<div class="col-sm-offset-1 col-sm-3"></div>
</div>
<div class="row">
<div class="col-sm-offset-1 col-sm-3"></div>
<div class="col-sm-offset-1 col-sm-3"></div>
<div class="col-sm-offset-1 col-sm-3"></div>
</div>
<div class="row">
<div class="col-sm-12"></div>
</div>
</div>【讨论】：
谢谢，汉堡现在出现了，小问题你知道如何将我的自定义背景图像更改为更小的纯色背景吗？ 您可以为此使用媒体查询。例如@media only screen and (max-width: 767px) .navbar background-image:none;background-color:red;
接受！我已将其添加到我的 CSS 中，但没有任何改变。
@LukeSciberras 很好。您希望您的背景在多大的屏幕尺寸下从图像变为颜色？【参考方案2】：
我也遇到了同样的问题。我的解决方案是在 css 中为图标栏设置背景颜色：
.icon-bar
background-color: black;
【讨论】：
以上是关于导航栏没有变成汉堡或响应的主要内容，如果未能解决你的问题，请参考以下文章