css - 为什么我的 4 列 "col-xs"Bootstrap 3 布局不会缩小到 980 像素以下？

Question

请注意，我正在 Chrome 的移动模拟器中对此进行测试，该模拟器是通过控制台单击移动图标找到的。请查看此屏幕截图 - i.imgur.com/MXXYkzi.png 未添加其他 html

页面上唯一的CSS是Bootstrap 3.1 css文件和下面width:100%的样式:

<div id="body" style="width:100%;">
    <div class="row">
        <div class="col-xs-2">

        </div>
        <div class="col-xs-6">

        </div>
         <div class="col-xs-2">

        </div>
        <div class="col-xs-2">
         Testing...
        </div>
    </div>
</div>

当我将浏览器窗口缩小到小于 980 像素时，列不会进一步缩小吗？

这是为什么？ CSS 规则中似乎没有任何内容可以解释原因。

编辑:换句话说，我得到了一个水平滚动条，我希望列的宽度会缩小。

Answer 1

在 Chrome 移动模拟器中，您需要指定元内容宽度，否则默认为 980px

添加这个:

<meta name="viewport" content="width=device-width">

成功了。