Twitter bootstrap 3 bootstrap mobile first grid内嵌全屏

我正在尝试构建一个移动的第一个网页，因此我正在测试引导网格系统，因为这似乎是一个简单的方法，但我在移动iphone6s上很难让网格完全运行（所有屏幕尺寸都在这个范围内）。 我有一个测试脚本，其中有6列要在屏幕上内联显示

如果我使用下面的X列，网格将内联排列，但右侧有大量空白。代码和屏幕截图如下所示

 <div class="container">
  <div class="row">
    <div class="col-xs-2" style="border:solid; padding: 5px;">test</div>
    <div class="col-xs-2" style="border:solid; padding: 5px;">test</div>
    <div class="col-xs-2" style="border:solid; padding: 5px;">test</div>
    <div class="col-xs-2" style="border:solid; padding: 5px;">test</div>
    <div class="col-xs-2" style="border:solid; padding: 5px;">test</div>
    <div class="col-xs-2" style="border:solid; padding: 5px;">test</div>
  </div>
</div>

测试
测试
测试
测试
测试
测试

如果我将代码更改为col sm，我会将网格堆叠起来，如下面的屏幕截图所示

---

让这些盒子在整个屏幕上并排排列的最佳方法是什么。我应该在每个框上使用padding或width%CSS吗？或者有没有比Bootstrap更好的方法呢？因为您是Bootstrap新手，我建议您从Bootstrap v4开始，它解决了这个问题

看看

这里有一个例子。每列自动变为整个屏幕宽度的33.33%

<div class="container">
  <div class="row">
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
    <div class="col-sm">
      One of three columns
    </div>
  </div>
</div>

测试
测试
测试
测试
测试
测试

sm和xs是指定col何时分解的参数，因为sm很早就分解了。你可以看到每个col都在彼此下面。我知道sm和xs会根据屏幕大小来组合列堆栈，但我认为引导是为移动优先应用程序设计的，所以xs会使框在屏幕上排列，我希望我会使用css来做这件事。目前，我正在删除纯css网格的引导，上面的示例使用的是引导4.3.1