为什么选择我的4栏＆＃34; col-xs＆＃34; Bootstrap 3布局缩小到980px宽？

Question

注意我正在通过控制台点击移动图标找到的Chrome移动模拟器中对此进行测试。请看这个截图 - i.imgur.com/MXXYkzi.png没有添加其他HTML

页面上唯一的CSS是Bootstrap 3.1 css文件，宽度样式：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>

当我将浏览器窗口缩小到小于980px时，列不会再缩小？

这是为什么？ CSS规则中的任何内容似乎都无法解释原因。

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

Answer 1

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

添加：

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

让它发挥作用。