使用bootstrap3navbar时很多默认的样式如果更改移动端下面的显示就会出问题，这个怎么破？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<title>2-7bootstrap</title>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<link rel="stylesheet" href="bootstrap-4.0.0/dist/css/bootstrap.css">
<link rel="stylesheet" href="css/2-7bootstrap.css">
<script src="js/jquery-3.3.1.js"></script>
<script src="bootstrap-4.0.0/assets/js/vendor/popper.min.js"></script>
<script src="bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script>
<script src="bootstrap-4.0.0/dist/js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<div class="row header">
<div class="col-md-3 col-sm-2 col-xs-1 text-right logo">imooc</div>
<div class="col-md-5 col-sm-5 col-xs-5">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link navbar-brand" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>


</div>
<div class="col-md-4 col-sm-5 col-xs-2">
<span class="a1 glyphicon glyphicon-search " data-container="body" data-toggle="popover" data-placement="bottom" data-content="该怎么切换呢？" href="#1"></span>
<span class="a1 glyphicon glyphicon-user" href="#1"></span>
<span class="a1 glyphicon glyphicon-shopping-cart" href="#1"></span>
</div>
</div>
<div class="row banner"></div>
<div class="row gallery"></div>
<div class="row subscript"></div>
<div class="row footer-bottom"></div>
<div class="row footer"></div>
</div>
<script>
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
</body>
</html>

/*html代码*/

*{
margin:0;
padding: 0;
}
body{
font-size: 16px;
}
.container{
max-width: 100%;
margin: 0;
}
.header{
flex-wrap: nowrap;
height: 3.6rem;
background:#5D4B33;
}
.header div:nth-child(1){
line-height: 3.6rem;
}
.header .logo{
font-size:2.4rem;
line-height: 3.2rem;
text-transform: uppercase;
color: #FFFFFF;
}
.header .a1{
display: inline-block;
padding: 0 1.2rem;
color: white;
font-size:1.6rem;
height: 3.5rem;
line-height: 3.5rem;
border-left: 1px solid #999999;
box-sizing: border-box;
}
.nav .nav-item .nav-link{
color: #FFFFFF;
height:3.6rem;
}
.nav .nav-item .active{
background: #f07818;
}
.nav .nav-item .nav-link:hover{
background: #f07818;
box-shadow: -1px 0 2px 0 rgba(0,0,0,0.4);
}

@media screen and (max-width:576px){
body{
font-size: 20px;
}
.header{
height: 4rem;
}
.header div:nth-child(1){
line-height: 4rem;
}
.header .a1{
padding: 0 0.4rem;
font-size:1.4rem;
height:3.9rem;
line-height:4rem;
}
}
@media screen and (max-width:376px){
body{
font-size: 20px;
}
.header{
height: 4rem;
}
.header div:nth-child(1){
font-size: 2rem;
line-height: 4rem;
}
.header .a1{
padding: 0 0.3rem;
font-size:0.3rem;
height:3.9rem;
line-height:4rem;
}
}/*媒体查询phone设备，改变body font-size来响应相对单位rem*/

Horizn 2018-11-01

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

收起

1回答

好帮手慕星星 2018-11-01 10:49:17

代码中布局还没有完善，参考建议：

可以将自己写的下拉菜单内容替换掉bootstrap模板中的内容，如下：

如果点击文字导航出现下拉菜单，那么就替换掉带有dropdown 的class类中的代码。

如果遇到bootstrap中默认的样式，自己添加样式覆盖掉就可以了，按照自己的实现方式来。

自己可以测试完善下，祝学习愉快！

收起回答

提问者 Horizn #1

我觉得我们理解的可能有偏差，我的这个问题是出现在栅格布局第一栏中间那个col，作业效果中的导航我分别将imooc放到第一栏左边的col，右边三个按钮放在右边的col里面，中间那个col就放的是nav以及那几个下拉菜单，，，按照您说的第一个图片里面就是将导航栏直接整个放到栅格的一行中去，然后再考虑导航栏内其他的元素布局，我先试试，你看看我这样理解对吗？我说的bootstrap模板的导航问题就出现在按我的方式设置后，在移动端，导航的那个点击按钮就出现了会挤掉别的块的问题，这个真的是让人头大。。。求指教。

2018-11-01 16:16:50
好帮手慕星星回复提问者 Horizn #2

老师给你的第一张截图中的布局就是为了解决当浏览器缩小时点击导航按钮出现的布局错误问题，你的理解是正确的，但是顶部可以不使用栅格布局来完成，按照正常div布局方式来就可以，左侧是文字和按钮以及下拉菜单，右侧是小图标。可以先实战一下，如果在测试中遇到问题，可以新建问答，将你的代码粘贴上来，老师帮助你解决。

2018-11-01 16:29:24
提问者 Horizn 回复好帮手慕星星 #3

coding。。。有问题会再提问的，谢谢老师

2018-11-01 16:31:58