我正在使用 Bootstrap css 网格布局，效果很好。
我还没有找到一个可以响应并将 3 列和 2 行转换为 2 列和 3 行的示例。
它的作用是创建 6 行的单列。我可以将偶数列从 4 转换为 2，但是如何做 3，因为它们在 2 个不同的行中？
我想如果有偶数列的解决方案，那么它可以解决奇数列。
【问题讨论】：
标签： html css twitter-bootstrap responsive-design
尝试使用
<div class="col-xs-6 col-sm-6 col-md-4" ></div>
<div class="col-xs-6 col-sm-6 col-md-4" ></div>
<div class="col-xs-6 col-sm-6 col-md-4" ></div>
<div class="col-xs-6 col-sm-6 col-md-4" ></div>
<div class="col-xs-6 col-sm-6 col-md-4" ></div>
<div class="col-xs-6 col-sm-6 col-md-4" ></div>
【讨论】：
考虑到您可能不得不在这个问题上跳出框框思考（我知道这是双关语）。如果你先画出不同的阶段，它可能有助于更好地形象化。
然后考虑您可能不需要行，除了包含列的行。在 Bootstrap 中，额外的列将自动强制第二行或第三行。
http://getbootstrap.com/css/#grid-example-mixed
您总共有 6 个 div。然后只需调整列类宽度数字即可。
现在您没有说您是希望在桌面大小的屏幕还是移动设备上显示这三列。为简单起见，我在这里假设 2 列布局是移动布局。
<div class="row">
<div class="col-xs-6 col-sm-6 col-md-4"> Content </div>
<div class="col-xs-6 col-sm-6 col-md-4"> Content </div>
<div class="col-xs-6 col-sm-6 col-md-4"> Content </div>
<div class="col-xs-6 col-sm-6 col-md-4"> Content </div>
<div class="col-xs-6 col-sm-6 col-md-4"> Content </div>
<div class="col-xs-6 col-sm-6 col-md-4"> Content </div>
</div>
您可以切换它，但为什么要将这么多列放在这么小的空间里……这样做可能是有原因的，但由于手指宽度问题，这种做法并不常见。然而，Bootstrap 就是那种程度的灵活。
<div class="row">
<div class="col-xs-4 col-sm-4 col-md-6"> Content </div>
<div class="col-xs-4 col-sm-4 col-md-6"> Content </div>
<div class="col-xs-4 col-sm-4 col-md-6"> Content </div>
<div class="col-xs-4 col-sm-4 col-md-6"> Content </div>
<div class="col-xs-4 col-sm-4 col-md-6"> Content </div>
<div class="col-xs-4 col-sm-4 col-md-6"> Content </div>
</div>
编辑 如果您说 7 列布局，还有一些方法可以使用偏移量使其居中。它只需要调整列的宽度，然后添加偏移量以使其居中。
http://getbootstrap.com/css/#grid-offsetting
添加偏移量时要记住的重要一点是，col 宽度加上偏移量不能等于 12，否则它将被一直推到右侧。当列宽为偶数（2、4、6、8 或 10）时，它也最有效。
您可以在 JSfiddle 或 CodePen 中练习（codepen 在 WYSIWYG 查看器中实时更新）。
【讨论】：