twitter-bootstrap 如何使用引导程序调整每行的列数

How can I adjust the number of columns per row with bootstrap

提问by Quoc Vu

Using Bootstrap v4alpha and I am trying to layout 24 pictures w/ caption underneath in grid. Let's call a tile a picture with its caption.

使用 Bootstrap v4alpha，我正在尝试在网格下方布置 24 张带有标题的图片。让我们将图块称为带有标题的图片。

1) I want the tiles to be aligned vertically and horizontally as we would have if using a < table > tag with align top and left. My pictures are of the same size, but the caption length varies.

1）我希望瓷砖垂直和水平对齐，就像我们使用 <table> 标签与顶部和左侧对齐一样。我的图片大小相同，但标题长度不同。

2) the number of columns adjusts with screen size. On a small screen, we would have 2 columns and 12 rows. On a medium screen 3 cols by 4 rows. On a large screen 4 cols and 3 rows.

2) 列数随屏幕大小调整。在小屏幕上，我们将有 2 列和 12 行。在中等屏幕上 3 列 x 4 行。在大屏幕上有 4 列和 3 行。

I tried the Cards Columnsand it's almost what I need, except the masonry look. I want them also aligned in rows.

我尝试了Cards Columns，它几乎是我需要的，除了砖石外观。我希望它们也成行对齐。

I also tried the Grid Optionswith col-sm-6, col-md-4, and col-lg-3 however the problem lies in the fact I need to wrap a fix number of tiles within a tag < div class="row" >.

我还尝试了col-sm-6、col-md-4 和 col-lg-3的网格选项，但问题在于我需要在标签 <div class="row 中包装固定数量的瓷砖” >。

This problem also exist in previous versions of Bootstrap, but if there is a specific solution for v4, I would like to know as well.

这个问题在之前的Bootstrap版本中也存在，但是如果有v4的具体解决方案，我也想知道。

回答by mmgross

You can just wrap all .col-*-*with one single <div class="row">...</div>. Your content will wrap when needed.

你可以只.col-*-*用一个<div class="row">...</div>. 您的内容将在需要时换行。

Now, as for your other question: You don't need to make sure that there are exactly 12 columns in each row for each screen size. If a column doesn't fit anymore (for example you have .col-*-11and then .col-*-2) it will go to the next row automatically, even if the previous row is not 100% full.

现在，至于您的另一个问题：您不需要确保每个屏幕尺寸的每行正好有 12 列。如果一列不再适合（例如您有.col-*-11然后.col-*-2），它会自动转到下一行，即使前一行不是 100% 已满。

Another example taken from Bootstrap's documentation

另一个例子来自Bootstrap 的文档

<div class="row">
  <div class="col-9">.col-9</div>
  <div class="col-4">.col-4<br>Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</div>
  <div class="col-6">.col-6<br>Subsequent columns continue along the new line.</div>
</div>

Here .col-4would introduce columns 10-13, but since there are only 12 columns, the whole div goes to the next row.

这里.col-4将介绍第 10-13 列，但由于只有 12 列，因此整个 div 转到下一行。

Bootstrap 4

引导程序 4

I made a fiddleto show you, how this would work in Bootstrap 4. v4's grid system is based on flexbox and in flexbox an items will grow to use all available vertical space. This means that in a row of columns, each column will be as tall as the tallest column.

我做了一个小提琴来告诉你，这在 Bootstrap 4 中是如何工作的。v4 的网格系统基于 flexbox，在 flexbox 中，项目将增长以使用所有可用的垂直空间。这意味着在一行列中，每一列都将与最高的列一样高。

This is a huge difference to Bootstrap 3 and means that there is no need to compensate for different heights of the content.

这与 Bootstrap 3 有很大的不同，意味着不需要补偿内容的不同高度。

Bootstrap 3

引导程序 3

I originally based my answer on Bootstrap 3 and there are a few differences, so I'll keep that original answer (slightly modified) here as well for anybody who needs it.

我最初的答案基于 Bootstrap 3 并且存在一些差异，因此我将在此处保留原始答案（略有修改），供任何需要它的人使用。

In Bootstrap 3, you can omit the .rowaltogether and use .containeras the parent to all the .col-*-*.

在 Bootstrap 3 中，您可以.row完全省略并.container用作所有.col-*-*.

You can check out this fiddleto see the difference between using .rowand not using .rowto layout a grid of images. Just adjust the width of the result-frame and scroll down to see the difference when there are 3 images in a row. Of course you can also use one single .rowto put all your .cols inside.

您可以查看此小提琴以了解使用.row和不使用.row布局图像网格之间的区别。只需调整结果帧的宽度并向下滚动以查看连续 3 个图像时的差异。当然你也可以用一个single.row把你所有的.cols都放进去。

Compensating for different content height

补偿不同的内容高度

However, since Bootstrap 3 uses floats instead of flexbox, this introduces the problem that if your columns are not the same height, the next column might start at the right of the highest element of the previous column when you want it to start at the left of the screen. So in order to push an element below all previous elements, you need to clear these floats.

但是，由于 Bootstrap 3 使用浮动而不是 flexbox，这就引入了一个问题，如果您的列高度不同，当您希望它从左侧开始时，下一列可能从前一列的最高元素的右侧开始屏幕的。因此，为了将一个元素推送到所有先前元素之下，您需要清除这些浮动。

Bootstrap 3 provides a class for this, you can just insert <div class="clearfix">whenever you want to clear the floats. Additionally, you will have to hide that div for screensizes where you don't want to clear the floats, you can use the classes .hidden-*to achieve that.

Bootstrap 3 为此提供了一个类，您可以<div class="clearfix">在想要清除浮动时插入。此外，对于不想清除浮动的屏幕大小，您必须隐藏该 div，您可以使用这些类.hidden-*来实现这一点。

<div class="container">
  <div class="col-sm-6 col-md-4 col-lg-3">
  </div>
  <div class="col-sm-6 col-md-4 col-lg-3">
  </div>

  <!-- on small devices the first row is full here, so we add a clearfix and hide it for medium and large sizes -->
  <div class="clearfix hidden-md hidden-lg"></div>

  <div class="col-sm-6 col-md-4 col-lg-3">
  </div>

  <!-- on medium devices the first row is full here, so we add a clearfix and hide it for small and large sizes -->
  <div class="clearfix hidden-sm hidden-lg"></div>

  <div class="col-sm-6 col-md-4 col-lg-3">
  </div>
</div>

Again, I made a fiddleto show the whole thing in action.

再次，我做了一个小提琴来展示整个事情的进展。