Question

我正在使用Bootstrap css网格布局，效果很好。

我还没有找到一个可以响应并将3列和2行转换为2列和3行的示例。

它的作用是创建6行的单列。我可以将偶数列从4转换为2但是如何将它们分成2个不同的行？

我认为如果有偶数列的解决方案，那么它可以用于奇数。

Answer 1

尝试使用

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

Answer 2

考虑到你可能不得不在这个盒子外面思考（我知道）。如果你先画出不同的阶段，它可能会有助于更好地形象化。

然后考虑您可能不需要行，除了包含列的行。在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中练习（在WYSIWYG查看器中进行代码实时更新）。

3列2行响应2列3行

2 个答案: