bootstrap边学边记（三）导航栏实现自适应

除夕快乐，过年就要好好玩，同时不要忘记学习技术哦~

现在导航栏：

这时候如果需求说，导航栏要变成这类的居中布局

操作：
1.在bootstrap,有个类名<div class="container"></div>，<复制下 包住导航条
效果:
但是你在手机看到，太丑了！！！我们应该让他的宽充满屏幕

2.为什么会这样呢，我们来看.container这个class是怎么设置的
所以我们需要@media设置一下，一般手机平板都不会宽过960；
所以代码+注释：

    /* 真实设备显示宽度小于960时候 */
    @media screen and (max-device-width:960px){
        .container{margin: 0;padding: 0; max-width: 100%; z-index: 9999;}
    }

现在效果：

手机上显示的效果：
平板上显示效果：
我们设置宽度1000时候，恢复原样：

自适应已经成功了；



thank you!!!