如何使用bootstrap调整每行的列数

Question

使用Bootstrap v4alpha，我正在尝试在网格中布局24张带有标题的图片。让我们称一个瓦片为带有标题的图片。

1)我想让tiles垂直和水平对齐，就像我们在使用< table >标签时一样，并在顶部和左侧对齐。我的图片大小相同，但标题长度不同。

2)列数随屏幕大小调整。在一个小屏幕上，我们将有2列12行。在中等屏幕上，3个cols乘以4行。在一个大屏幕上，4行，3行。

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

我也尝试了Grid Options -sm-6、of md-4和of lg-3，但是问题出在我需要在一个标签中包装固定数量的瓦片。

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

Answer 1

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

现在，对于您的另一个问题:您不需要确保每行中每种屏幕大小正好有12列。如果一列不再适合(例如，您有.col-*-11，然后是.col-*-2)，它将自动转到下一行，即使上一行没有100%满。

取自Bootstrap's documentation的另一个示例

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

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

引导程序4

V4的网格系统是基于的，在flexbox中，项目将增长以使用所有可用的垂直空间。这意味着在一行列中，每列将与最高的列一样高。

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

引导程序3

我最初的答案是基于Bootstrap 3的，有一些不同之处，所以我将把原始的答案(略微修改)保留在这里，以供需要它的人使用。

在Bootstrap 3中，您可以完全省略.row，并使用.container作为所有.col-*-*的父对象。

您可以查看，了解使用.row和不使用.row对图像网格进行布局的区别。只需调整结果框的宽度，然后向下滚动以查看连续3张图像时的差异。当然，您也可以使用一个.row将所有的.col放入其中。

补偿不同的内容高度

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

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>

再一次，我做了一个来展示整个过程。