Bootstrap在手机上无法正常工作

Question

我试图将我的设计作为手机运行在chrome上的开发人员工具，但引导程序无法正常工作。有人可以告诉我为什么Bootstrap不适用于移动设备吗？

这是我试图在手机上运行时的图片。

和这个当我在桌面上运行它工作我不知道为什么不在手机上。

这里是我的媒体查询。

@media (max-width: 768px) { 
.img-responsive{ 
width: 300px; 
height:50px; 
padding-left:50px; 
} 
} 
@media (max-width: 376px) { 
.img-responsive{ 
width: 220px; 
height:50px; 
padding-left: 20px; 
} 
} 
@media (max-width: 286px) { 
.img-responsive{ 
width: 180px; 
height:50px; 
padding-left: 5px; 
} 
.footer{ 
height: auto; 
} 
h4{ 
padding-top: 50px; 
padding-left: 20px; 
} 
} 

Answer 1

你可能缺少视meta标签在HTML头：

视口是用户网页的可见区域。使用width=device-width，您需要将宽度设置为您在移动设备或平板电脑或台式机中查看的设备宽度。

<meta name="viewport" content="width=device-width, initial-scale=1"> 

参见此链接：Viewport meta tag

What is Viewport?.

Answer 2

您没有正确使用媒体查询。使用它以这样的方式

---

@media only screen and (max-width: 500px) { 
    body { 
     background-color: lightblue; 
    } 
} 

参考更多详细信息：http://www.w3schools.com/css/css_rwd_mediaqueries.asp