html - 使用 Twitter Bootstrap 的响应式行

Question

我使用 Twitter Bootstrap 设置了两行三列，如下所示:

<div class="row">
    <div class="col-md-4">
     Some Stuff
    </div>
    <div class="col-md-4">
     Some more stuff
    </div>
    <div class="col-md-4">
     Even more stuff
    </div>
</div>
<div class="row">
    <div class="col-md-4">
     Some Stuff
    </div>
    <div class="col-md-4">
     Some more stuff
    </div>
    <div class="col-md-4">
     Even more stuff
    </div>
</div>

这对于特定的像素宽度(两行三列)效果很好，但是当我减小屏幕尺寸时，它的一行有 2 个，然后另一行有 1 个(对于 1 行)。然后当 iPhone 屏幕尺寸时，它们每个都在自己的行中，但它们偏离了中心。

如何使这些行响应，以便在屏幕尺寸缩小时，2 列显示为容器宽度的 50%？然后当屏幕缩小到手机设备宽度时，每列占据容器宽度的 100%。

Answer 1

参见示例:

<div class="row">
  <div class="col-xs-12 col-sm-6 col-md-4"> Some Stuff </div>
  <div class="col-xs-12 col-sm-6 col-md-4"> Some more stuff </div>
  <div class="col-xs-12 col-sm-6 col-md-4"> Even more stuff </div>
  <div class="col-xs-12 col-sm-6 col-md-4"> Some Stuff </div>
  <div class="col-xs-12 col-sm-6 col-md-4"> Some more stuff </div>
  <div class="col-xs-12 col-sm-6 col-md-4"> Even more stuff </div>
</div>