如何使用BootStrap的响应式设计修复这种奇怪的行为？

Question

我的网站使用BootStrap模板在移动设备上使用时自动执行响应式设计。 home和about页面在响应式设计方面存在一些问题。

HOME和ABOUT页面（在桌面上查看）：

主页和关于页面将在桌面浏览器窗口中正确显示，我缩小窗口以测试其响应式设计并且它可以正常工作，显示可点击的图标栏并滑动更多导航链接。

主页和关于页面（在移动设备上查看）：

现在，困扰我的一件事是，在移动浏览器中查看时，上一张图片中看到的图标栏并不存在，而是列出导航栏下的所有导航，就像它是桌面一样。在移动设备上查看的主页保持响应，导航将全部链接。

更令人费解的是，当我刷新页面时，没有导航列表，没有图标栏，然后它在移动浏览器中变得响应。

所以，我保持清爽，它像最后两张图像一样来回走动。我想知道如何解决这个问题并使其正确并始终如一致地响应，如桌面浏览器窗口中所示。

注意：请随意查看来源或检查我问题开头提供的链接，并根据需要复制/粘贴代码以找出我遇到的问题。谢谢！

**外部CSS（应用于两个页面的自定义样式）**

@import url("bootstrap.min.css");
@import url("bootstrap-theme.css");

.jumbotron{
  margin-top: 50px;
 background-color:transparent;
background-size: cover;
color: #FFFFFF;
} 

.jumbotron h1{
color: #FFFFFF;
text-shadow: 0px 0px 5px #888888;
} 

.row{
margin: 0 auto;
}

.row img{
height:300px;
width:300px;
margin: 0 auto;
}

.full {
  background: url("../images/laser_keyboard.jpg") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

body, .container{
margin-left: auto;
margin-right: auto;
padding-left: 15px;
padding-right: 15px;
}

嵌入式CSS（about.html）

    @import url("bootstrap.min.css");
    @import url("bootstrap-theme.css");

    .container{
        background-color:#fff;
    }

    body{
        margin-top: 30px;
    }

    footer{
        margin: 10px 0;
    }