自举网格无法在智能手机上显示

Question

我正在使用bootstrap V3。 我正在尝试使用网格属性来制作响应式网站

  <div class="row">
    <div class="col-xs-7 backgroundcolor">7</div>
    <div class="col-xs-4 backgroundcolor">4</div>
    <div class="col-xs-1 backgroundcolor">1</div>
  </div>

但是当我在智能手机上查看此代码时，col-xs-1与其他代码不同。

如果我将行更改为：

<div class="row">
    <div class="col-xs-1 backgroundcolor">1</div>
    <div class="col-xs-4 backgroundcolor">4</div>
    <div class="col-xs-7 backgroundcolor">7</div>
  </div>

col-xs-7与col-xs-1和col-xs-4不在同一行显示。 在大屏幕上没有问题。

您也可以在http://www.bootply.com/87060找到我的代码。

Answer 1

我不确定，如果这与您的问题有关，请尝试

<div class="container"> 

在第2行而不是     类=“COL-XS-12

这是使用Bootstrap网格的正确方法。