如何使用 bootstrap 调整每行的列数
How can I adjust the number of columns per row with bootstrap
使用 Bootstrap v4alpha，我正在尝试在网格下方布置 24 张带标题的图片。让我们将图块称为带有标题的图片。
1) 我希望图块垂直和水平对齐，就像我们使用 < table > 标签并上下对齐一样。我的图片大小相同，但标题长度不同。
2) 列数随屏幕大小调整。在小屏幕上，我们会有 2 列和 12 行。在中等屏幕上，3 列乘 4 行。在大屏幕上 4 列和 3 行。
我尝试了 Cards Columns，它几乎就是我需要的，除了砖石外观。我希望它们也排成行。
我还尝试了 Grid Options 与 col-sm-6、col-md-4 和 col-lg-3 但问题在于我需要包装标签内固定数量的图块 < div class="row" >.
这个问题在Bootstrap之前的版本中也存在，但是如果v4有具体的解决方法，我也想知道。
您可以用一个 <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 > 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转到下一行。
Bootstrap 4
I made a fiddle 向您展示，这在 Bootstrap 中是如何工作的 4. v4 的网格系统基于 flexbox，在 flexbox 中，项目将增长以使用所有可用的垂直 space .这意味着在一行列中，每一列都将与最高列一样高。
这与 Bootstrap 3 有很大的不同，意味着不需要补偿内容的不同高度。
Bootstrap 3
我最初的回答是基于 Bootstrap 3，但存在一些差异，所以我会保留原始答案（稍作修改），以供需要的人使用。
在 Bootstrap 3 中，您可以完全省略 .row 并使用 .container 作为所有 .col-*-*.
的父级
您可以查看 this fiddle 以了解使用 .row 和不使用 .row 布局图像网格之间的区别。只需调整结果框的宽度并向下滚动即可查看连续 3 张图像时的差异。当然你也可以用一个.row把你所有的.col都放在里面。
补偿不同的内容高度
但是，由于 Bootstrap 3 使用浮动而不是 flexbox，这会引入一个问题，即如果您的列高度不同，下一列可能会从前一列最高元素的右侧开始当您希望它从屏幕左侧开始时。因此，为了将一个元素推到所有先前元素的下方，您需要清除这些浮动。
Bootstrap 3为此提供了一个class，你可以在任何时候想清除浮动时插入<div class="clearfix">。此外，对于不想清除浮动的屏幕尺寸，您必须隐藏 div，您可以使用 classes .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>
我又做了一个 fiddle 来展示整个过程。
使用 Bootstrap v4alpha，我正在尝试在网格下方布置 24 张带标题的图片。让我们将图块称为带有标题的图片。
1) 我希望图块垂直和水平对齐，就像我们使用 < table > 标签并上下对齐一样。我的图片大小相同，但标题长度不同。
2) 列数随屏幕大小调整。在小屏幕上，我们会有 2 列和 12 行。在中等屏幕上，3 列乘 4 行。在大屏幕上 4 列和 3 行。
我尝试了 Cards Columns，它几乎就是我需要的，除了砖石外观。我希望它们也排成行。
我还尝试了 Grid Options 与 col-sm-6、col-md-4 和 col-lg-3 但问题在于我需要包装标签内固定数量的图块 < div class="row" >.
这个问题在Bootstrap之前的版本中也存在，但是如果v4有具体的解决方法，我也想知道。
您可以用一个 <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 > 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转到下一行。
Bootstrap 4
I made a fiddle 向您展示，这在 Bootstrap 中是如何工作的 4. v4 的网格系统基于 flexbox，在 flexbox 中，项目将增长以使用所有可用的垂直 space .这意味着在一行列中，每一列都将与最高列一样高。
这与 Bootstrap 3 有很大的不同，意味着不需要补偿内容的不同高度。
Bootstrap 3
我最初的回答是基于 Bootstrap 3，但存在一些差异，所以我会保留原始答案（稍作修改），以供需要的人使用。
在 Bootstrap 3 中，您可以完全省略 .row 并使用 .container 作为所有 .col-*-*.
您可以查看 this fiddle 以了解使用 .row 和不使用 .row 布局图像网格之间的区别。只需调整结果框的宽度并向下滚动即可查看连续 3 张图像时的差异。当然你也可以用一个.row把你所有的.col都放在里面。
补偿不同的内容高度
但是，由于 Bootstrap 3 使用浮动而不是 flexbox，这会引入一个问题，即如果您的列高度不同，下一列可能会从前一列最高元素的右侧开始当您希望它从屏幕左侧开始时。因此，为了将一个元素推到所有先前元素的下方，您需要清除这些浮动。
Bootstrap 3为此提供了一个class，你可以在任何时候想清除浮动时插入<div class="clearfix">。此外，对于不想清除浮动的屏幕尺寸，您必须隐藏 div，您可以使用 classes .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>
我又做了一个 fiddle 来展示整个过程。