屏幕缩小到768右侧导航会竖直排列是什么原因？

屏幕缩小到768右侧导航会竖直排列是什么原因？

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	<meta name="viewport" content="width=device-width, 
    initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title>kiki</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
	<link rel="stylesheet" type="text/css" href="css/css.css">
</head>
<body>
<!--页面头部区域-->
<header>
	<p>IMOOC</p>
	<ul class="nav nav-pills" id="hidden">
		<li class="active"><a href="#">首页</a></li>
		<li class="dropdown">
			<a href="#" class="dropdown-toggle" data-toggle="dropdown">
				生日<b class="caret"></b>
			</a>
			<div class="dropdown-menu hidden-div">
				<ul>
					<li>关系</li>
					<li class="divider"></li>
					<li>朋友</li>
					<li>爱人</li>
					<li>姐妹</li>
				</ul>
				<ul>
					<li>风味</li>
					<li class="divider"></li>
					<li>巧克力</li>
					<li>水果</li>
				</ul>
				<ul>
					<li>主旋律</li>
					<li class="divider"></li>
					<li>心形</li>
					<li>卡通</li>
				</ul>
			</div>
		</li>
		<li class="dropdown">
			<a href="#" class="dropdown-toggle" data-toggle="dropdown">
				婚礼<b class="caret"></b>
			</a>
			<div class="dropdown-menu hidden-div">
				<ul>
					<li>关系</li>
					<li class="divider"></li>
					<li>朋友</li>
					<li>爱人</li>
					<li>姐妹</li>
				</ul>
				<ul>
					<li>风味</li>
					<li class="divider"></li>
					<li>巧克力</li>
					<li>水果</li>
				</ul>
				<ul>
					<li>主旋律</li>
					<li class="divider"></li>
					<li>心形</li>
					<li>卡通</li>
				</ul>
			</div>
		</li>
		<li class="dropdown">
			<a href="#" class="dropdown-toggle" data-toggle="dropdown">
				专用<b class="caret"></b>
			</a>
			<div class="dropdown-menu hidden-div">
				<ul>
					<li>关系</li>
					<li class="divider"></li>
					<li>朋友</li>
					<li>爱人</li>
					<li>姐妹</li>
				</ul>
				<ul>
					<li>风味</li>
					<li class="divider"></li>
					<li>巧克力</li>
					<li>水果</li>
				</ul>
				<ul>
					<li>主旋律</li>
					<li class="divider"></li>
					<li>心形</li>
					<li>卡通</li>
				</ul>
			</div>
		</li>
		<li class="dropdown">
			<a href="#" class="dropdown-toggle" data-toggle="dropdown">
				商铺<b class="caret"></b>
			</a>
			<div class="dropdown-menu hidden-div">
				<ul>
					<li>关系</li>
					<li class="divider"></li>
					<li>朋友</li>
					<li>爱人</li>
					<li>姐妹</li>
				</ul>
				<ul>
					<li>风味</li>
					<li class="divider"></li>
					<li>巧克力</li>
					<li>水果</li>
				</ul>
				<ul>
					<li>主旋律</li>
					<li class="divider"></li>
					<li>心形</li>
					<li>卡通</li>
				</ul>
			</div>
		</li>		
	</ul>
	<!--导航右侧选项卡-->
	<ul class="nav navbar-nav nav-right">
		<li>
			<a href="#" class="glyphicon glyphicon-search dropdown-toggle" data-toggle="dropdown">
				
			</a>
			<ul class="dropdown-menu menu-1">
					<li><input type="text" name=""><button>搜</button></li>
			</ul>
		</li>
			<li class="dropdown">
				<a href="#" class="dropdown-toggle glyphicon glyphicon-user" data-toggle="dropdown">
					
				</a>
				<ul class="dropdown-menu menu-2">
					<li>
						<p>Email</p>
						<input type="email" name="">
					</li>
					<li>
						<p>Password</p>
						<input type="Password" name="">
					</li>
					<li>
						<button>登录</button>
					</li>
					<li>
						<input type="radio" name="">记住
					</li>
					<li>
						<span>新用户？</span>
						<a href="#" style="color: rgb(231,112,31);">注册</a>
						<span>｜</span>
						<a href="#">忘记密码？</a>
					</li>
				</ul>
			</li>
		<li>
			<a href="#" class="glyphicon glyphicon-shopping-cart dropdown-toggle" data-toggle="dropdown">
				
			</a>
			<ul class="dropdown-menu menu-3">
				<li><p>$0.00(0)</p></li>
				<li><button>空</button></li>
			</ul>
		</li>
	</ul>
</header>
<!--页面banner区域-->
<section class="banner">
	<div class="container">
		<div class="row">
			<div class="col-xs-6 col-sm-6 col-md-6 banner-left">
				<h4>IMOOC</h4>
				<h3>蛋糕</h3>
				<p>特别的日子，特别的你</p>
				<button>
					SHOP NOW
				</button>
			</div>
			<div class="col-xs-6 col-sm-6 col-md-6 banner-right">
				<img src="imge/2.png">
			</div>
		</div>
	</div>
</section>
<!--gallery-->
<section class="gallery">
	<div class="container">
		<div class="row">
			<div class="col-xs-7 col-sm-7 col-md-7 gallery-img img-1">
					<a href="#"><img src="imge/g1.jpg"></a>
					<div class="info">
						<span class="glyphicon glyphicon-eye-open"> View</span>
						<button>SHOP NOW</button>
					</div>
					<div>
						<p>Lorem lpseum is slmply</p>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star-empty"></span>
						<span class="glyphicon glyphicon-yen money">95.00</span>
					</div>
			</div>
			<div class="col-xs-4 col-sm-4 col-md-4 gallery-img img-2">
				<a href="#"><img src="imge/g2.jpg"></a>
				<div class="info">
					<span class="glyphicon glyphicon-eye-open"> View</span>
					<button>SHOP NOW</button>
				</div>
				<div>
					<p>Lorem lpseum is slmply</p>
					<span class="glyphicon glyphicon-star"></span>
					<span class="glyphicon glyphicon-star"></span>
					<span class="glyphicon glyphicon-star"></span>
					<span class="glyphicon glyphicon-star"></span>
					<span class="glyphicon glyphicon-star-empty"></span>
					<span class="glyphicon glyphicon-yen money">95.00</span>
				</div>
			</div>
		</div>
		<div class="row imgs">
			<div class="col-xs-6 col-sm-4 col-md-3 img-one">
				<div class="test">
					<img src="imge/g3.png">
					<div class="info">
						<span class="glyphicon glyphicon-eye-open"> View</span>
						<button>SHOP NOW</button>
					</div>
					<div>
						<p>Lorem lpseum is slmply</p>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star-empty"></span>
						<span class="glyphicon glyphicon-yen money">95.00</span>
					</div>
				</div>
			</div>
			<div class="col-xs-6 col-sm-4 col-md-3 img-one">
				<div class="test">
					<img src="imge/g4.png">
					<div class="info">
						<span class="glyphicon glyphicon-eye-open"> View</span>
						<button>SHOP NOW</button>
					</div>
					<div>
						<p>Lorem lpseum is slmply</p>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star-empty"></span>
						<span class="glyphicon glyphicon-yen money">95.00</span>
					</div>
				</div>
			</div>
			<div class="col-xs-6 col-sm-4 col-md-3 img-one">
				<div class="test">
					<img src="imge/g5.png">
					<div class="info">
						<span class="glyphicon glyphicon-eye-open"> View</span>
						<button>SHOP NOW</button>
					</div>
					<div>
						<p>Lorem lpseum is slmply</p>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star-empty"></span>
						<span class="glyphicon glyphicon-yen money">95.00</span>
					</div>
				</div>
			</div>
			<div class="col-xs-6 col-sm-4 col-md-3 img-one">
				<div class="test">
					<img src="imge/g6.png">
					<div class="info">
						<span class="glyphicon glyphicon-eye-open"> View</span>
						<button>SHOP NOW</button>
					</div>
					<div>
						<p>Lorem lpseum is slmply</p>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star-empty"></span>
						<span class="glyphicon glyphicon-yen money">95.00</span>
					</div>
				</div>
			</div>
		</div>
		<div class="row imgs">
			<div class="col-xs-6 col-sm-4 col-md-3 img-one">
				<div class="test">
					<img src="imge/g7.png">
					<div class="info">
						<span class="glyphicon glyphicon-eye-open"> View</span>
						<button>SHOP NOW</button>
					</div>
					<div>
						<p>Lorem lpseum is slmply</p>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star-empty"></span>
						<span class="glyphicon glyphicon-yen money">95.00</span>
					</div>
				</div>
			</div>
			<div class="col-xs-6 col-sm-4 col-md-3 img-one">
				<div class="test">
					<img src="imge/g8.png">
					<div class="info">
						<span class="glyphicon glyphicon-eye-open"> View</span>
						<button>SHOP NOW</button>
					</div>
					<div>
						<p>Lorem lpseum is slmply</p>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star-empty"></span>
						<span class="glyphicon glyphicon-yen money">95.00</span>
					</div>
				</div>
			</div>
			<div class="col-xs-6 col-sm-4 col-md-3 img-one">
				<div class="test">
					<img src="imge/g9.png">
					<div class="info">
						<span class="glyphicon glyphicon-eye-open"> View</span>
						<button>SHOP NOW</button>
					</div>
					<div>
						<p>Lorem lpseum is slmply</p>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star-empty"></span>
						<span class="glyphicon glyphicon-yen money">95.00</span>
					</div>
				</div>
			</div>
			<div class="col-xs-6 col-sm-4 col-md-3 img-one">
				<div class="test">
					<img src="imge/g10.png">
					<div class="info">
						<span class="glyphicon glyphicon-eye-open"> View</span>
						<button>SHOP NOW</button>
					</div>
					<div>
						<p>Lorem lpseum is slmply</p>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star"></span>
						<span class="glyphicon glyphicon-star-empty"></span>
						<span class="glyphicon glyphicon-yen money">95.00</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</section>
<!--subscribe-->
<section class="subscribe">
	<p>Newsletter</p>
	<div class="input-group">   
	    <input type="email" class="form-control" placeholder="Email">
	    <span class="input-group-addon">Subsonbe</span>
	</div>		
</section>
<!--footer-bottom区域-->
<section class="footer-bottom">
	<div class="container">
		<div class="row">
			<div class="col-xs-6 col-sm-4 col-md-3">
				<ul class="footer-ul">
					<li>COMPANY</li>
					<li>Products</li>
					<li>Work hlere</li>
					<li>Team</li>
					<li>Happenlnge</li>
					<li>Deeler locator</li>
				</ul>
			</div>
			<div class="col-xs-6 col-sm-4 col-md-3">
				<ul class="footer-ul">
					<li>SERVICE</li>
					<li>Support</li>
					<li>FAQ</li>
					<li>Watranly</li>
					<li>Comtaic ue</li>
				</ul>
			</div>
			<div class="col-xs-6 col-sm-4 col-md-3">
				<ul class="footer-ul">
					<li>ORDER&RETURNS</li>
					<li>Order Statue</li>
					<li>Shpping holcy</li>
					<li>Relum Poluy</li>
					<li>Dgtall Gift</li>

				</ul>
			</div>
			<div class="col-xs-6 col-sm-4 col-md-3">
				<ul class="footer-ul">
					<li>LEGAL</li>
					<li>Termr And COnditicn</li>
					<li>Soclal Responsblily</li>
				</ul>
			</div>
		</div>
	</div>
</section>
<!--footer区域-->
<footer>
	<div>Copyght&copy www.www.com All Righit Reeewd ｜京ICP备 1233456</div>
</footer>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<script type="text/javascript" src="js/js.js"></script>
</body>
</html>
/*header样式*/
header{
	width: 100%;
	height: 100px;
	background-color: #5d4b33;
}
header > p{
	margin-left: 10%;
	margin-right: 2%;
	font-size: 30px;
	color: #fff;
	float: left;
	padding-top: 30px;
	display: inline-block;
}

.hidden-div{
	width: 500px;
	height: 200px;
}
.hidden-div  > ul{
	float: left;
}

.hidden-div > ul > li{
	list-style: none;
	width: 100px;
	margin-bottom: 10px;
}
.hidden-div > ul > li:first-child{
	margin-top: 20px;
	font-size: 16px;
	color: #F07818;
}

.nav-pills{
	padding-top: 30px;
	display: inline-block;
}

.nav-right{
	float: right;
	margin-right: 10%;
	margin-top: 50px;
}

.menu-1 > li{
	text-align: center;
	margin: 10px;
}
.menu-1 > li > button{
	background-color: rgb(231,112,31);
	border: 1px solid rgb(231,112,31);
	color: #fff;
}
.menu-1 > li > input{
	border: 1px solid rgb(231,112,31);
}
.menu-2{
	width: 300px;
}
.menu-2 > li:nth-child(2),
.menu-2 > li:nth-child(1){
	margin-left: 40px;
}
.menu-2 > li:nth-child(2) > input,
.menu-2 > li:nth-child(1) > input{
	width: 200px
}
.menu-2 > li:nth-child(3) > button{
	width: 200px;
	margin-top: 20px;
	background-color: rgb(231,112,31);
	border: 1px solid rgb(231,112,31);
	color: #FFF;
	margin-left: 40px;
	height: 30px;
	transition: all 0.3s;
}
.menu-2 > li:nth-child(3) > button:hover{
	color: rgb(231,112,31);
	background-color: #FFF;
}
.menu-2 > li:nth-child(4){
	margin-top: 10px;
	margin-left: 40px;
}
.menu-2 > li:nth-child(5){
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10px;
}
.menu-2 > li:nth-child(5) > a{
	display: inline;
	margin: 0;
	padding: 0;
}
.menu-3{
	text-align: center;
}
.menu-3 > li > button{
	width: 200px;
	background-color: rgb(231,112,31);
	border: 1px solid rgb(231,112,31);
	color: #FFF;
	margin-bottom: 10px;
	transition: all 0.3s;
}
.menu-3 > li > p{
	margin-top: 20px;
}
.menu-3 > li > button:hover{
	color: rgb(231,112,31);
	background-color: #FFF;
}
.menu-1,
.menu-2,
.menu-3{
	width: 280px;
	transform: translate(-80%,0);
}




/*banner样式*/

.banner{
	width: 100%;
	height: 500px;
	background-color: rgb(244,245,249);
}
.banner-right > img{
	max-width: 394px;
	width: 100%;
}
.banner-right,
.banner-left{
	margin-top: 100px;
}

.banner-left > h4{
	font-size: 50px;
	color: red;
	display: inline-block;
}

.banner-left > h3{
	display: inline-block;
	color: rgb(226,127,45);
	font-size: 60px;
}

.banner-left > p{
	font-size: 16px;
	margin-top: 20px;
	margin-bottom: 30px;
	color: rgb(226,127,45);
	font-weight: bold;
}

.banner-left > button{
	height: 40px;
	width: 30%;
	border: 5px solid red;
	background-color: #fff;
	font-weight: bold;
	transition: all 0.5s;

}

.banner-left > button:hover{
	border: 5px solid #F07818;
	color: #F07818;
}

/*gallery区域*/
.gallery-img{
	padding: 0;
	overflow: hidden;
}

.gallery-img > a> img{
	margin-top: 100px;
	width: 100%;
	max-height: 380px;
	position: relative;
}
.money{
	float: right;
	color: gray;
	font-size: 20px;
	margin-bottom: 10px;
}

.info{
	position: absolute;
	width: 100%;
	height: 0px;
	background-color: rgba(0,0,0,0.7);
	bottom: 60px;
	overflow: hidden;
	transition: height 0.3s;
	color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.info > button{
	border: 2px solid #fff;
	background-color: rgba(0,0,0,0);
	height: 30px;
	margin-right: 10px;
}
.info > button:hover{
	border: 2px solid #F07818;
	color:#F07818 ;
}

.info > span{
	margin-left: 10px;
}
.img-2{
	float: right;
	margin-right: 10px;
}
.img-one:hover .info,
.img-2:hover .info,
.img-1:hover .info{
	height: 50px;
}
.imgs{
	margin-top: 30px;
}
.test >img{
	width: 100%;
	border: 1px solid rgb(245,245,245);
}
.test{
	margin: 0 15px;
	position: relative;
}

/*subscribe区域*/
.subscribe{
	margin-top: 50px;
	width: 100%;
	height: 300px;
	background-color: rgba(0,0,0,.5);
	text-align: center;
	position: relative;
	background-image: url('../imge/slid.jpg');
	background-size: 100%;
	background-attachment: fixed;
}
.input-group{
	width: 40%;
	position: absolute;
	left: 50%;
	top: 60%;
	transform: translate(-50%,-50%);
}

.subscribe > p{
	font-size: 60px;
	color: #fff;
	padding-top: 50px;
}
.input-group-addon{
	background-color: rgb(240,122,17);
	color: #fff;
	border: 1px solid rgb(240,122,17);
}
.input-group-addon:hover{
	background-color: rgb(67,53,55);
	cursor: pointer;
}
.form-control{
	background-color: rgba(255,255,255,.1);
	color: #fff;
}
/*footer-bottom区域*/
.footer-ul{
	list-style: none;
	margin-top: 50px;
	display: inline-block;
	height: 300px;
}

.footer-ul > li:nth-child(n){
	margin-bottom: 10px;
	font-size: 16px;
	color: rgb(181,181,181);
}

.footer-ul > li:first-child{
	font-size: 24px;
	color: rgb(178,148,117);
}
.footer-bottom{
	height: auto;
}
/*footer区域*/
footer{
	height: 100px;
	background-color: rgb(94,76,52);
	text-align: center;
}

footer > div{
	line-height: 100px;
	color: #fff;
	font-size: 16px;
}


/*媒体查询小于768时*/
@media screen and (max-width: 780px){
	/*使头部左侧导航隐藏为一个可点击按钮*/
	#hidden{
		display: none;
	}
}

http://img1.sycdn.imooc.com//climg/5acd9cc800019eae02290242.jpg如图。。怎么解决啊
qq_陌_45 2018-04-11
源自：项目：实现企业网站首页   2-7 作业题
35
收起

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

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

2回答
好帮手慕糖 2018-04-18 15:13:49

你好，这里是因为下面的ul（就是单击被显示的菜单）是静态定位，li的宽度，会被这个ul撑开，建议：可以把其设置为绝对定位。

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

祝学习愉快~

0
收起回答
好帮手慕糖 2018-04-11 15:58:50

你好，如下图是在大于768px时，bootstrap定义的li有浮动，但是小于的时候就没有了。建议：可以再给li添加一个左浮动。

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

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

祝学习愉快~

0
收起回答
  • 提问者 qq_陌_45 #1
    设置了发现小于768时候，点击弹出来的内容也会错位。请问有是什么属于影响了呢
    2018-04-11 16:52:27
  • qq__9987 回复 提问者 qq_陌_45 #2
    大于768px的时候，navbar-header是设置了左浮动，而小于768px的时候是块级元素，所以会把右边的元素挤下去。多看看源码就知道了。
    2018-04-22 23:07:28
问题已解决，确定采纳
还有疑问，暂不采纳

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

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

0 星

相似问题

响应式导航问题
0 0 5
老师我的导航缩小后 右边的空隙怎么解决
0 0 3
为什么在宽度过小时导航和图片会重叠，在宽带768到856之间导航会变成两行？
0 0 5
第一个红线的导航消失到第二个红线按钮里不明白
13 0 3
浏览器窗口拉小，banner布局就乱了
8 0 3

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

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

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

了解课程

本课精华内容

问答 作业

图片高度不一样的问题

45 24

请问老师原理是什么

70 16

请问老师到底是什么机制

44 12

我的js为什么绑定不上啊

0 11

请问这个怎么解释

44 11

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

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