bootstrap 移动第一格内联全屏

Question

我正在尝试构建一个移动第一个网页，因此我正在测试 Bootstrap 网格系统，因为这似乎是一种简单的方法，但我无法在移动 iphone 6s 上让网格全长（与所有此范围内的屏幕尺寸）。 我有一个包含 6 列的测试脚本，要在屏幕上内联显示。

如果我使用以下 col-xs，网格会内联，但右侧有大量空白。代码和屏幕截图如下所示。

 <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，我会将网格堆叠起来，如下图所示

让这些框在整个屏幕上并排排列的最佳方法是什么？我应该在每个盒子上使用填充或宽度 % CSS，还是有比 Bootstrap 更好的方法来解决这个问题

Answer 1

由于您是 bootstrap 新手，我建议您从解决了这个问题的 boostrap v4 开始。

看看https://getbootstrap.com/docs/4.0/layout/grid/#how-it-works

这是一个例子。每列自动变为整个屏幕宽度的 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>

更新

如果你坚持使用 bootstrap v3，使用可以这样做：

.row-eq-height {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
            }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
 <div class="container ">
  <div class="row row-eq-height">
    <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>