页面缩小到768px之后，顶部的导航不见了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>蛋糕店</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!-- header -->
<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" src="images/logo.png">
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-left header-middle">
<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><a href="#" class="dropdown-header">关系</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">朋友</a></li>
<li><a href="#">爱人</a></li>
<li><a href="#">姐妹</a></li>
<li><a href="#" class="dropdown-header">风味</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">巧克力</a></li>
<li><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><a href="#" class="dropdown-header">关系</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">朋友</a></li>
<li><a href="#">爱人</a></li>
<li><a href="#">姐妹</a></li>
<li><a href="#" class="dropdown-header">风味</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">巧克力</a></li>
<li><a href="#">水果</a></li>
<li><a href="#" class="dropdown-header">主旋律</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">心形</a></li>
<li><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><a href="#" class="dropdown-header">关系</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">朋友</a></li>
<li><a href="#">爱人</a></li>
<li><a href="#">姐妹</a></li>
<li><a href="#" class="dropdown-header">风味</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">巧克力</a></li>
<li><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><a href="#" class="dropdown-header">关系</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">朋友</a></li>
<li><a href="#">爱人</a></li>
<li><a href="#">姐妹</a></li>
<li><a href="#" class="dropdown-header">风味</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">巧克力</a></li>
<li><a href="#">水果</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right header-right">
<li class="search"><a href="#"><span class="glyphicon glyphicon-search" aria-hidden="true"></span></a>
<div class="search-sub">
<div class="input-group">
<input type="text" class="form-control" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">搜</span>
</div>
</div>
</li>
<li class="user"><a href="#"><span class="glyphicon glyphicon-user" aria-hidden="true"></span></a>
<div class="user-sub">
<label for="email">Email</label>
<div class="input-group">
<input type="text" class="form-control" id="email" aria-describedby="basic-addon3">
</div>
<label for="pwd">Password</label>
<div class="input-group">
<input type="text" class="form-control" id="pwd" aria-describedby="basic-addon3">
</div>
<button type="button">登录</button>
<div class="remember">
<input type="checkbox" name="check">
<span>记住</span>
</div>
<p>新用户？<span class="regis">注册 |</span> 忘记密码？</p>
</div>
</li>
<li class="shop-cart"><a href="#"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span></a>
<div class="shop-cart-sub">
<p>$0.00(0)</p>
<button type="button">空</button>
</div>
</li>
</ul>
</div>
<button class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></button>
</div><!-- /.container-fluid -->
</nav>
</header>
<!-- banner -->
<section class="banner">
<div class="container-fluid">
<div class="row">
<div class="banner-left col-md-6 col-sm-6 col-xs-6">
<div>
<h3><span>IMOOC </span> 蛋糕</h3>
<p>特别的日子，特别的你</p>
<button class="button">SHOP NOW</button>
</div>
</div>
<div class="banner-right col-md-6 col-sm-6 col-xs-6">
<img src="images/2.png">
</div>
</div>
</div>
</section>
<!-- gallery -->
<section class="gallery">
<div class="container-fluid">
<div class="row">
<div class="col-md-8 col-sm-8 col-xs-8">
<img src="images/g1.jpg">
<h5>Lorem lpsum is simply</h5>
<div>
<span class="stars"></span>
<span class="price">$95.00</span>
</div>
<div class="module">
<div class="left">
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> View
</div>
<div class="right">
<button type="button">SHOP NOW</button>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4 col-xs-4">
<img src="images/g2.jpg">
<h5>Lorem lpsum is simply</h5>
<div>
<span class="stars"></span>
<span class="price">$95.00</span>
</div>
<div class="module">
<div class="left">
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> View
</div>
<div class="right">
<button type="button">SHOP NOW</button>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-3 col-sm-4 col-xs-4">
<img src="images/g3.png">
<h5>Lorem lpsum is simply</h5>
<div>
<span class="stars"></span>
<span class="price">$95.00</span>
</div>
<div class="module">
<div class="left">
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> View
</div>
<div class="right">
<button type="button">SHOP NOW</button>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-4">
<img src="images/g4.png">
<h5>Lorem lpsum is simply</h5>
<div>
<span class="stars"></span>
<span class="price">$95.00</span>
</div>
<div class="module">
<div class="left">
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> View
</div>
<div class="right">
<button type="button">SHOP NOW</button>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-4">
<img src="images/g5.png">
<h5>Lorem lpsum is simply</h5>
<div>
<span class="stars"></span>
<span class="price">$95.00</span>
</div>
<div class="module">
<div class="left">
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> View
</div>
<div class="right">
<button type="button">SHOP NOW</button>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-4">
<img src="images/g6.png">
<h5>Lorem lpsum is simply</h5>
<div>
<span class="stars"></span>
<span class="price">$95.00</span>
</div>
<div class="module">
<div class="left">
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> View
</div>
<div class="right">
<button type="button">SHOP NOW</button>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-4">
<img src="images/g7.png">
<h5>Lorem lpsum is simply</h5>
<div>
<span class="stars"></span>
<span class="price">$95.00</span>
</div>
<div class="module">
<div class="left">
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> View
</div>
<div class="right">
<button type="button">SHOP NOW</button>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-4">
<img src="images/g8.png">
<h5>Lorem lpsum is simply</h5>
<div>
<span class="stars"></span>
<span class="price">$95.00</span>
</div>
<div class="module">
<div class="left">
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> View
</div>
<div class="right">
<button type="button">SHOP NOW</button>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-4">
<img src="images/g9.png">
<h5>Lorem lpsum is simply</h5>
<div>
<span class="stars"></span>
<span class="price">$95.00</span>
</div>
<div class="module">
<div class="left">
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> View
</div>
<div class="right">
<button type="button">SHOP NOW</button>
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-4">
<img src="images/g10.png">
<h5>Lorem lpsum is simply</h5>
<div>
<span class="stars"></span>
<span class="price">$95.00</span>
</div>
<div class="module">
<div class="left">
<span class="glyphicon glyphicon-eye-open" aria-hidden="true"></span> View
</div>
<div class="right">
<button type="button">SHOP NOW</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- subscribe -->
<section class="subscribe">
<h1>Newsletter</h1>
<div>
<input type="text" placeholder="Email">
<button type="button">Subscribe</button>
</div>
</section>
<!-- footer-bottom -->
<section class="footer-bottom">
<div class="container-fluid">
<div class="col">
<h3>COMPANY</h3>
<p>Products</p>
<p>Work Here</p>
<p>Team</p>
<p>Happenings</p>
<p>Dealer Locator</p>
</div>
<div class="col">
<h3>SERVICE</h3>
<p>Support</p>
<p>FAQ</p>
<p>Warranty</p>
<p>Contact Us</p>
</div>
<div class="col">
<h3>ORDER & RETURNS</h3>
<p>Order Status</p>
<p>Shipping Policy</p>
<p>Return Policy</p>
<p>Digital Gift Card</p>
</div>
<div class="col">
<h3>LEGAL</h3>
<p>Privacy</p>
<p>Terms And Conditions</p>
<p>Social Responsibility</p>
</div>
</div>
</section>
<!-- footer -->
<footer>Copyright © 2017 imooc com All Rights Reserved | 京ICP备 13046642号 2</footer>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
</html>
*{
padding: 0;
margin: 0;
}
header nav{
width: 100%;
height: 60px;
}
.container-fluid{
width: 80%;
}
header nav.navbar{
border-radius: 0;
margin-bottom: 0;
}
.navbar-header{
height: 60px;
}
header nav.navbar-default{
background: #5D4B33;
border: none;
}
.navbar-brand{
padding: 0;
margin-top: 13px;
}
.header-middle{
margin-left: 60px;
/*width: 40%;*/
}
.navbar-default .header-middle > .active > a,
.navbar-default .header-middle > .active > a:hover,
.navbar-default .header-middle > .active > a:focus,
.navbar-default .header-middle > li > a:hover,
.navbar-default .header-middle>.open>a,
.navbar-default .header-middle>.open>a:focus{
background: #F07818;
color: #fff;
}
.navbar-default .navbar-nav>li{
border-left: 1px solid #666;
}
.navbar-default .navbar-nav>li>a{
color: #fff;
padding: 0px 15px;
line-height: 60px;
}
.dropdown-menu{
padding: 10px 15px;
}
.dropdown-menu>li>a{
padding: 3px 0;
}
.dropdown-menu>li>a.dropdown-header{
color: #F07818;
font-size: 16px;
}
.dropdown-menu>.divider{
margin-top: 0;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: #F07818;
background-color: #fff;
}
.navbar-default .header-right > li > a:hover{
background: #5D4B33;
color: #fff;
}
.search-sub, .user-sub, .shop-cart-sub{
position: absolute;
top: 100%;
right: 0;
z-index: 99;
padding: 20px 15px;
width: 200px;
background: #fff;
box-shadow: 0 0 1px #888;
display: none;
}
.search-sub:before, .user-sub:before, .shop-cart-sub:before{
content: " ";
position: absolute;
top: -8px;
right: 14px;
border-width: 0 8px 8px;
border-style: solid;
border-color: transparent transparent #fff;
}
.search-sub span{
border: none;
background: #F07818;
color: #fff;
}
.search:hover .search-sub,.user:hover .user-sub,.shop-cart:hover .shop-cart-sub{
display: block;
}
.user-sub{
width: 230px;
}
.user-sub label{
margin: 5px 0;
}
.user-sub button,.shop-cart-sub button{
width: 100%;
height: 30px;
margin: 10px 0;
color: #fff;
background: #F07818;
border: 1px solid #F07818;
transition: all .5s;
}
.user-sub button:hover,.shop-cart-sub button:hover{
background: #fff;
color: #F07818;
}
.user-sub .remember span{
font-size: 12px;
font-style: italic;
display: inline-block;
height: 20px;
vertical-align: middle;
}
.user-sub > p{
font-size: 12px;
text-align: center;
margin: 0;
}
.user-sub > p > .regis{color: #F07818;}
.shop-cart-sub p{
text-align: center;
}
.shop-cart-sub button{
margin: 0;
}
.navbar > div > button{
width: 40px;
height: 30px;
background: #F07818;
color: #fff;
position: absolute;
border: none;
font-size: 14px;
border-radius: 5px;
left: 50%;
top: 50%;
margin-top: -15px;
margin-left: -20px;
display: none;
}
/* banner */
.banner{
width: 100%;
height: 400px;
background: #f2f6f7;
}
.banner .row{
display: flex;
justify-content: space-between;
}
.banner-left, .banner-right{
display: flex;
align-items: center;
height: 400px;
}
.banner-left h3{
font-size: 40px;
color: #F07818;
}
.banner-left h3 > span{
color: #5D4B33;
}
.banner-left p{
color: #F07818;
}
.banner-left button{
width: 160px;
height: 40px;
line-height: 30px;
border: 5px solid #5D4B33;
background: #f2f6f7;
margin-top: 10px;
transition: all .5s ease-in-out;
}
.banner-left button:hover{
border-color: #F07818;
color: #F07818;
}
.banner-right{
justify-content: flex-end;
}
.banner-right img{
width: 250px;
height: 230px;
}
/* gallery */
.gallery{
margin: 50px 0;
}
.gallery img{
width: 100%;
}
.gallery .stars{
display: block;
float: left;
width: 120px;
height: 20px;
background: url('../images/star.png') repeat;
background-position: -8px -20px;
}
.gallery .price{
display: block;
height: 20px;
line-height: 20px;
float: right;
}
.gallery .row > div{
position: relative;
}
.gallery .module{
/*width: 95.9%;*/
height: 50px;
padding: 10px 20px;
position: absolute;
background: rgba(0, 0, 0, .8);
bottom: 55px;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
visibility: hidden;
}
.gallery .row > div:hover .module{
visibility: visible;
}
.gallery .module .right button{
width: 130px;
height: 30px;
background: transparent;
border: 2px solid #fff;
/*transition: all .5s;*/
}
.gallery .module .right button:hover{
border-color: #F07818;
color: #F07818;
}
/* subscribe */
.subscribe{
width: 100%;
height: 300px;
background: url('../images/slid.jpg');
background-size: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
}
.subscribe h1{
margin-bottom: 30px;
}
.subscribe div input{
display: inline-block;
padding: 0 10px;
width: 300px;
height: 35px;
border: none;
background: rgba(200, 200, 200, .3);
}
.subscribe div input::-webkit-input-placeholder{
color: #fff;
}
.subscribe div button{
width: 100px;
height: 35px;
border: 1px solid #F07818;
background: #F07818;
color: #fff;
margin-left: -4px;
transition: all .5s;
}
.subscribe div button:hover{
background: rgba(200, 200, 200, .3);
color: #F07818;
}
/* footer-bottom */
.footer-bottom{
width: 100%;
padding: 30px 0;
background: #f2f6f7;
}
.footer-bottom > .container-fluid{
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}
.footer-bottom .col{
margin-right: 50px;
}
.footer-bottom .col h3{
color: #F07818;
margin-bottom: 30px;
}
.footer-bottom .col p:hover{
color: #F07818;
cursor: pointer;
}
/* footer */
footer{
width: 100%;
height: 60px;
text-align: center;
line-height: 60px;
color: #fff;
background: #5D4B33;
font-size: 12px;
}
@media (max-width: 992px) and (min-width: 768px){
.container-fluid{
width: 90%;
}
.footer-bottom .col{
margin-right: 60px;
}
.banner-right img{
width: 220px;
height: 200px;
}
}
@media (max-width: 768px){
.container-fluid{
width: 100%;
}
.banner-right img{
width: 200px;
height: 180px;
}
.navbar > div > button{
display: block;
}
.header-middle{
display: none;
}
.navbar-default .header-middle > li > a{
display: block;
}
}
$(function(){
var col = $('.gallery .row').children('div');
// console.log(col);
var colIndex = 0;
var width = 0;
col.mouseover(function(){
colIndex = $(this).index();
// console.log(colIndex);
width = $(this).children('h5').width() - 40;
// console.log(width);
$(this).children('.module').width(width);
});
var btn = $('.navbar').children('div').children('button');
btn.click(function(){
$('.header-middle').show();
})
})
正在回答 回答被采纳积分+1
你好，
768px以下的按钮不需要自己设置，可以使用bootstrap中的样式，参考官网示例：
https://v3.bootcss.com/components/#navbar
在自己代码相应的位置添加上即可。
需要将css中设置的导航隐藏样式去掉：
布局上可以调整一下，官网中的示例中，浏览器缩小之后，右侧小图标就会形成下拉导航中的一部分，建议将右侧小图标从nav标签中分离出来，单独放在右侧。
自己可以动手试一试，祝学习愉快！
- 参与学习 人
- 提交作业 2198 份
- 解答问题 5012 个
如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星