用chrome来调试页面，发现手机上浏览布局全乱了，我在页面中用到了bootstrap框架，使用时要哪个就去套用class样式，贴上部分代码，

html代码：

<nav class="navbar navbar-default top">
<div class="container">

   <a class="navbar-brand" href="#"><img src="images/001.png"></a>
   <ul class="nav navbar-nav navbar-right">
            <li><a href="#" class="a1" target="_blank">首页</a></li>
            <li><a href="#" class="a1" target="_blank">第二页</a></li>
            <li><a href="#" class="a1" target="_blank">第三页</a></li>
    </ul>
</div>
</nav>

//图片轮播图

<div class="picshow">
<div id="box">
<div> <img src="images/001.jpg"></div>
</div>
<ol id="change" >
<li class="b1 active"></li>
<li class="b1"></li>
<li class="b1"></li>
</ol>
</div>

css代码：

body {
padding-bottom: 50px;
}
.a1 {
margin-top: 10px;
}
.top {
width: 1200px;
margin: 0 auto;
}
.top img {
width:221px;
height:42px;
}
.top ul {
float: right;
}
.top ul li {
float: left;
}
.picshow{
height: 720px;
width: 100%;
position: relative;
}
.picshow #box {
width: 100%;
height: 720px;
}
.picshow #box img {
width: 100%;
height: 720px;
border: none;
}
.picshow #change {
position: absolute;
list-style: none;
width: 400px;
margin: 0 auto;
left: 50%;
bottom: 100px;
margin-left: -100px;
}
.picshow #change li {
float: left;
width: 50px;
height: 24px;
background: url(images/libofore.png) no-repeat;
cursor: pointer;
}
.picshow #change .active {
background: url(images/li.png) no-repeat;
}

网页显示正常，到了手机端图片轮播那部分可以自适应屏幕宽度，但是导航条部分只能显示logo，图片轮播哪里没有用bootstrap，到底怎样才可以很好的再手机端浏览啊，bootstrap里面定义的css可以修改吗？是不是每一个css干嘛呀的都要记清楚？自适应和响应式是不是一回事？