请问下为什么768下导航按钮无效

请问下为什么768下导航按钮无效

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 实战项目</title>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/layout.css">
  </head>
  <body>
    <!-- 头部 -->
   <header id="header">
     <div class="container ">
      <nav class="navbar navbar-default">
        <div class="container-fluid">
          <!-- Brand and toggle get grouped for better mobile display -->
          <div class="navbar-header  left">
            <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>
            <div class="logo left">IMOOC</div>
          </div>

          <!-- Collect the nav links, forms, and other content for toggling -->
          <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1 left">
            <ul class="nav navbar-nav">
              <li class="active">
                <a href="#">首页 </a>
              </li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">生日 <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li class="left">
                    <h4>关系</h4>
                    <a href="#">朋友</a>
                    <a href="#">爱人</a>
                    <a href="#">姐妹</a>
                  </li>
                  <li class="left">
                    <h4>风味</h4>
                    <a href="#">巧克力</a>
                    <a href="#">水果</a>
                  </li>
                </ul>
              </li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">婚礼 <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li class="left">
                    <h4>关系</h4>
                    <a href="#">朋友</a>
                    <a href="#">爱人</a>
                    <a href="#">姐妹</a>
                  </li>
                  <li class="left">
                    <h4>风味</h4>
                    <a href="#">巧克力</a>
                    <a href="#">水果</a>
                  </li>
                  <li class="left">
                    <h4>主旋律</h4>
                    <a href="#">心形</a>
                    <a href="#">卡通</a>
                  </li>
                </ul>
              </li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">专用 <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li class="left">
                    <h4>关系</h4>
                    <a href="#">朋友</a>
                    <a href="#">爱人</a>
                    <a href="#">姐妹</a>
                  </li>
                  <li class="left">
                    <h4>风味</h4>
                    <a href="#">巧克力</a>
                    <a href="#">水果</a>
                  </li>
                </ul>
              </li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">商铺 <span class="caret"></span></a>
                <ul class="dropdown-menu">
                  <li class="left">
                    <h4>关系</h4>
                    <a href="#">朋友</a>
                    <a href="#">爱人</a>
                    <a href="#">姐妹</a>
                  </li>
                  <li class="left">
                    <h4>风味</h4>
                    <a href="#">巧克力</a>
                    <a href="#">水果</a>
                  </li>
                </ul>
              </li>
            </ul>
          </div><!-- /.navbar-collapse -->
          <div class="right">
            <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
            sagittis lacus vel augue laoreet rutrum faucibus.">
              <span class="glyphicon glyphicon-search icon" ></span>
            </button>
              
              <span class="glyphicon glyphicon-user icon"></span>
              <span class="glyphicon glyphicon-shopping-cart icon"></span>
          </div>
        </div><!-- /.container-fluid -->
      </nav>
      
     </div>
   </header>
    <!-- banner区 -->
   <!--  <section>
      <div class="banner">
        <div class="container">
          <div class="row">
            <div class="col-md-7 col-sm-7 col-xs-7">
              <span class="text-1">IMOOC </span>
              <span class="text-2">蛋糕</span>
              <div  class="text-3">
                特别的日子，特别的你
              </div>
              <button type="button" class="but">SHOP NOW</button>
            </div>
            <div class="col-md-5 col-sm-5 col-xs-5">
              <img src="images/2.png" alt="">
            </div>
          </div>
        </div>
      </div>
    </section> -->
    <!-- gallery区 -->
   <!--  <section>
      <div class="gallery">
        <div class="container">
          <div class="row">
            
        </div>
      </div>
    </section> -->
    
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>
#header{
	background-color: #5D4B33;
	height: 60px;
}
.navbar-default{
	border: 0;
	line-height: 60px;

}
.container-fluid{

	background-color: #5D4B33;	
}
.logo{
	font-size: 36px;
	color: #fff;
}
.navbar-nav{
	margin-left: 20px;
}
.navbar-default .navbar-nav >li {
	margin-left: 5px;
	width:80px;
	text-align: center;
	color: #fff;
	/* border-left: 1px solid ; */
}
.navbar-default .navbar-nav > li > a{
	height: 60px;
	color: #fff;
	margin: 0;
	line-height:60px;
	padding: 0;
}
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus{
	background-color: orange;
	color: #fff;
	height: 58px;
}

.dropdown-menu{
	width: 600px;
	height: 250px;
}
.dropdown-menu .left{
	float: left;
	padding: 20px 30px;
	color: #5D4B33;
	margin-right: 60px;
}
.dropdown-menu .left h4{
	color: orange;
}
.dropdown-menu .left a{
	padding: 0;
	margin: 20px 0;
	color: #5D4B33;
}
.navbar-default .navbar-nav>.open>a,
 .navbar-default .navbar-nav>.open>a:focus, 
 .navbar-default .navbar-nav>.open>a:hover{
 	background-color: orange;
	color: #fff;
	height: 58px;
}

 .navbar-default .navbar-nav > li > a:hover{
 	background-color: orange;
	color: #fff;
	transition: all .3s;
 }
 .dropdown-menu>li>a:hover{
 	background-color: #fff;
 	color: #F07818;
 	transition: all .3s;
 }
.navbar-default .navbar-collapse{
	float: left;
}
.left{
	float: left;
}
.right{
	float: right;
}
.icon{
	color: #fff;
}
.navbar-default .navbar-toggle{
 	background-color: orange;
    border: 0;
    left: 30px;
    top: 5px;
    color: #fff;
 }
.navbar-default .navbar-toggle .icon-bar{
	background-color: #fff;
	 
}

/*  屏幕小于 768px */
 @media (max-width: 768px){
 	.logo{
 		font-size: 24px;
 	}
 	.right{
 		position: relative;
 		top: 0;
 		right: 0;
 	}
 }
Aries典 2018-09-25
源自：项目：实现企业网站首页   2-7 作业题
0
收起

正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论，去登陆吧

2回答
好帮手慕星星 2018-09-25 17:22:31

http://img1.sycdn.imooc.com//climg/5ba9fe1e0001969413050408.jpg

button中的data-target属性值要与菜单中的id值一致，不可以任意添加，将left去掉就可以了。自己测试下。

0
收起回答
好帮手慕星星 2018-09-25 17:12:24

bootstrap中的样式：

http://img1.sycdn.imooc.com//climg/5ba9fbc100012b9004450142.jpg

最小值768的时候设置按钮隐藏，也就是>=768px的时候是隐藏状态，768px时按钮没有显示。

祝学习愉快~~

0
收起回答
  • 提问者 Aries典 #1
    我的意思是768px以下的分辨率按钮失效点击没有反应
    2018-09-25 17:14:14
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

第一个红线的导航消失到第二个红线按钮里不明白
13 0 3
为什么在宽度过小时导航和图片会重叠，在宽带768到856之间导航会变成两行？
0 0 5
导航栏问题
17 0 3
左侧楼层导航的实现以及右侧导航的动画效果该怎么实现
0 0 6
请问下导航栏按钮之间的切换用jquery咋实现的
9 0 4

登录后可查看更多问答，登录/注册

响应式开发与常用框架 2018
  • 参与学习           人
  • 提交作业       2198    份
  • 解答问题       5012    个

如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！

了解课程

本课精华内容

问答 作业

图片高度不一样的问题

45 24

请问老师原理是什么

70 16

请问老师到底是什么机制

44 12

我的js为什么绑定不上啊

0 11

请问这个怎么解释

44 11

查看更多本课问答
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师