使用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>

Answer 2

请试试这个，

<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>

Answer 3

使用手机大小css而不是桌面，因此在所有屏幕尺寸上保持相同。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
    <div class="col-xs-4">
     Some Stuff
    </div>
    <div class="col-xs-4">
     Some more stuff
    </div>
    <div class="col-xs-4">
     Even more stuff
    </div>
</div>
<div class="row">
    <div class="col-xs-4">
     Some Stuff
    </div>
    <div class="col-xs-4">
     Some more stuff
    </div>
    <div class="col-xs-4">
     Even more stuff
    </div>
</div>