3列2行响应2列3行 [英] 3 columns 2 rows responsive to 2 columns 3 rows

问题描述

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

I'm using Bootstrap css grid layout it works great.

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

I haven't found an example where it can be responsive and convert 3 columns and 2 rows into 2 columns and 3 rows.

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

What it does is create single column of 6 rows. I can convert even columns from 4 to 2 but how to do 3 as they are in 2 different rows?

我以为如果有偶数列的解决方案，那么就可以解决这个问题。

I thought if there is solution for an even number of columns then it could be done for odd.

推荐答案

请考虑一下，您可能需要对此开箱即用（我知道是一丁点）。如果您先绘制不同的阶段，可能会更好地将其可视化。

Take into consideration that you may have to think outside of the box (punny I know) on this one. It may help visualize it better if you drew out the different stages first.

然后考虑您可能不需要行，除了包含列的行。在Bootstrap中，额外的列将自动强制第二或第三行。

Then consider you may not need rows, except the one to contain the columns. In Bootstrap extra columns will force a second or third row automatically.

http://getbootstrap.com/css/#grid-example-mixed

您总共有6个div。然后只需调整列类的宽度数字即可。

You have 6 total divs. Then just adjust the column class width numbers.

现在，您无需说要在台式机屏幕还是移动设备上使用三列。为了简单起见，我将在这里假设2列布局是移动布局。

Now you didn't say if you wanted the three columns on a desktop-sized screen or a mobile. I'm going to assume here, for the sake of simplicity, that the 2 columns layout is a mobile layout.

<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具有这种灵活性。

You CAN switch it up, but why put that many columns into such a small space... there could be reasons to do it that way but it's not common due to finger-width issues. However, Bootstrap is that level of flexible.

<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列的布局）。只需调整列的宽度，然后添加偏移量以使其居中即可。

Edit There are also ways to keep it centered using offsets, if you have say a 7 column layout. It just requires adjusting the width of the columns and then adding offsets to keep it centered.

http://getbootstrap.com/css/#grid-offsetting

添加offset，即col宽度加上offset不能等于12，否则它将一直推到最右边。当列宽为偶数（2、4、6、8或10）时，它也最有效。

An important thing to remember when adding an offset, is that the col width plus the offset cannot equal 12 or it will be pushed all the way to the right. It also works best when the column width is an even number (2, 4, 6, 8, or 10).

您可以在JSfiddle或CodePen中进行练习（codepen live在所见即所得的查看器中进行更新）。

You can practice in JSfiddle or CodePen (codepen live updates in a WYSIWYG viewer).

这篇关于3列2行响应2列3行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！