折叠内容出了怎么弄都有点问题，给看看呗

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>慕课网bootstrap页面服作业</title>
<link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" href="./css/style.css">
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
</head>
<style>
#header {
width: 100%;
height: 65px;
background-color: #5d4d33;
}
#header .container-fluid {
width: 90%;
}
#header .navbar-nav {
margin-left: 30px;
}
#header .navbar-nav .active > a {
background: #f07918;
}
#header .navbar-nav li {
border-left: 1px solid #77674b;
}
#header .navbar-nav li a {
padding-top: 20px;
height: 65px;
color: white;
}
#header .navbar-nav li a:hover {
background: #f07918;
}
#header .navbar-right .navbar-nav a {
padding-left: 20px;
padding-right: 20px;
}

</style>
<body>
<nav id="header" class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="navbar-collapse">
<span class="sr-only">切换导航</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">
<img src="https://s1.ax1x.com/2018/12/06/F1NMMd.png">
</a>
</div>
<div class="navbar-left">
<ul class="nav navbar-nav collapse navbar-collapse" id="navbar-collapse">
<li class="active">
<a href="#">首页</a>
</li>
<li>
<a href="#">生日
<b class="caret"></b>
</a> 
</li>
<li>
<a href="#">婚礼
<b class="caret"></b>
</a>
</li>
<li>
<a href="#">专用
<b class="caret"></b>
</a>
</li>
<li>
<a href="#">商铺
<b class="caret"></b>
</a>
</li>
</ul>
</div>
<div class="navbar-right">
<ul class="nav navbar-nav">
<li><a href="#">
<span class="glyphicon glyphicon-search"></span>
</a></li>
<li><a href="#">
<span class="glyphicon glyphicon-user"></span>
</a></li>
<li><a href="#">
<span class="glyphicon glyphicon-shopping-cart"></span>
</a></li>
</ul>
</div>
</div>
</nav>
<section id="banner"></section>
<section id="gallery"></section>
<section id="subscribe"></section>
<section id="footer-bottom"></section>
<footer id="footer"></footer>
</body>


</html>

陈子长 2018-12-06

源自：项目：实现企业网站首页 2-7 作业题

收起

3回答

提问者陈子长 2018-12-06 19:44:40

收起回答

提问者陈子长 2018-12-06 19:28:28

想要达到上面这种效果。切换到平板模式后，导航缩成小方块。小图标不变。怎么弄呢？

收起回答

好帮手慕星星 #1

老师在上面回答中已经给你提供思路了哦，将右侧小图标从nav中分离出来然后左右两侧再分别设置样式即可，自己动手实现下。

2018-12-06 19:35:59
提问者陈子长回复好帮手慕星星 #2

还是有点不太懂啊，从nav中分离出来，就不被container-fluid包裹了，整体的结构就乱了？见上图

2018-12-06 19:44:23
提问者陈子长回复好帮手慕星星 #3

而且我的写法和bootstrap文档里的demo一样啊，就是不知道那里出问题了？

2018-12-06 19:45:55

好帮手慕星星 2018-12-06 19:23:27

同学的意思是浏览器缩小之后，右侧小图标显示位置不对吗？效果显示如下：

建议将右侧的小图标从nav标签分离出来，外层再包裹一个大盒子：

左侧nav设置左浮动，右侧小图标设置右浮动。

自己调整下布局，祝学习愉快！

收起回答

提问者陈子长 #1

想要达到上面这种效果。切换到平板模式后，导航缩成小方块。小图标不变。怎么弄呢？

2018-12-06 19:28:48
好帮手慕星星回复提问者陈子长 #2

已经在另一个问题中进行了回复，可以查看下：http://class.imooc.com/course/qadetail/81237

2018-12-07 11:26:53