Bootstrap 3.3.7 xs断点失效：低于480px四列无法堆叠

嘿，我来帮你搞定这个问题！首先咱们得揪出最关键的原因——你的代码里少了viewport元标签，这可是Bootstrap响应式布局能正常工作的核心前提哦。

第一步：补上viewport标签 #

你看，在里的<meta charset="utf-8">下面，加上这行代码就行：

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

这个标签的作用是告诉浏览器：“请用设备本身的宽度作为页面视口，初始缩放比例设为1”，没有它的话，移动设备会把页面当成桌面宽度来渲染，xs断点的样式根本触发不了，自然就一直保持sm的布局啦。

第二步：确认列的类设置正确 #

Bootstrap 3是移动优先的设计，如果你想让列在xs断点（<768px，包含你说的480px）下堆叠，有两种简单的方式：

• 方式1：不用额外加xs的类，因为默认情况下，xs断点的列会自动占满整行（也就是堆叠），只要有了上面的viewport标签，就会生效。
• 方式2：显式给列加上col-xs-12类，强制它在xs断点下占满一行，比如：

<div class="col-xs-12 col-sm-3">列1</div>
<div class="col-xs-12 col-sm-3">列2</div>
<div class="col-xs-12 col-sm-3">列3</div>
<div class="col-xs-12 col-sm-3">列4</div>

给你一个完整的测试代码示例 #

把这些修改整合后，完整代码应该是这样的，你可以直接拿去测试：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>My Test File</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-xs-12 col-sm-3">列1</div>
            <div class="col-xs-12 col-sm-3">列2</div>
            <div class="col-xs-12 col-sm-3">列3</div>
            <div class="col-xs-12 col-sm-3">列4</div>
        </div>
    </div>
</body>
</html>

再给你捋捋为啥之前不行 #

没有viewport标签的时候，移动浏览器会把页面宽度模拟成桌面端的宽度（比如980px），这时候页面宽度比sm断点的768px还大，所以浏览器一直用sm的布局，根本不会触发xs的堆叠效果。加上viewport标签后，浏览器就会用设备的实际宽度，当宽度小于768px（包括480px）时，xs断点的样式就会生效，列自然就乖乖堆叠啦。

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