Codepen中简单代码移动端无响应，求助问题排查

嘿，我瞅了你的问题和代码，症结其实特别明显——你没添加Bootstrap实现响应式必需的viewport元标签！

Bootstrap的移动端适配完全靠这个标签撑着，没它的话，手机浏览器会默认把页面按桌面端的宽度（一般是980px左右）来渲染，哪怕你用了container-fluid这类响应式组件也白搭，自然就会出现页面超出屏幕的情况。

具体解决办法： #

• 把下面这个元标签加到你HTML的<head>区域里：

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

原理说明： #

这个标签是在告诉手机浏览器两件事：

• width=device-width：让页面宽度和设备的屏幕宽度保持一致
• initial-scale=1：设置页面的初始缩放比例为1，也就是不做任何缩放

加上之后再用手机访问，页面就能正常适配屏幕宽度了。另外提一句，你现在的HTML代码看起来没包含完整的<head>结构，记得把这个标签放在<head>内部，这样Bootstrap才能正确识别设备视口哦。

内容的提问来源于stack exchange，提问作者DevB1