html - 引导网格无法在智能手机上正确显示

Question

我正在使用引导程序 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 行而不是 class="col-xs-12

这将是使用 Bootstrap-grid 的正确方法。