自动填充引导网格

Question

是否可以使用bootstrap自动填充布局中的空格？

我有一个cols-xs-6网格，只有一个项目有col-xs-12，但所有这些数据都是动态的，col-xs-12容器并不总是显示。但是，当它显示时，我需要下一个容器来填充图像上的空白区域。

使用Bootstrap可以做到这一点吗？还是弹性布局？

结果应该是这样的：

Answer 1

twiter bootstrap手拉手工作，比如说.col-md-12（1 / st half）.col-md-12（secound half）他们大部分都写完了其他的，如果这个规则被忽略那么说bootstrap 3 ，使用float css属性，它会将下一个父div浮动到它，bootstarp 4使用flex-box，这仍然不是更好的解决方案。

我建议您使用masonary，只需要指定每列的宽度，我认为这是一个更好的解决方案。

masonary使用现有父div填充空格，将它们相互浮动，保持固定宽度或响应宽度px和百分比。

我曾在我创建的模板中使用过masonary。

这里也许这支笔会有所帮助。

1. https://codepen.io/desandro/pen/eJJEXd

2. https://codepen.io/desandro/pen/myBxD?selected_tag=masonry&

   你可以这样做一个jquery调用 $（＆＃39;＃容器＆＃39;）砌体（{。   itemSelector：＆＃39; .item＆＃39;，   columnWidth：＆＃39; .item＆＃39;，   percentPosition：true }）;

和html看起来像这样

<div id="container">
  <div class="col-md-3"><img src="https://lorempixel.com/300/350/nature" /></div>
  <div class="col-md-3"><img src="https://lorempixel.com/300/300/nature" /></div>
  <div class="col-md-3"><img src="https://lorempixel.com/300/450/nature" /></div>
</div>

它们是doc文档中提供的其他方法，以帮助进一步自定义

Answer 2

您可以使用Flexbox order property (MDN)重新排序部分或全部弹性项目（Bootstrap4.β网格使用Flexbox）。

➡️ Demo on Bootply 两种情况：.col-sm-12之前是否为空格（例如后者是偶数或奇数）。

/* Add .customized on a parent/ancestor of Bootstrap grid .row element to
 * allow item next to a full width one to occupy empty space before it if
 * there's any (e.g. if the wide one is even
 */
.customized .col-sm-12:nth-child(even) {
  order: 1;
}
.customized .col-sm-12:nth-child(even) ~ .col-sm-6 {
  order: 1;
}
.customized .col-sm-12:nth-child(even) + .col-sm-6 {
  order: 0;
}

• 第二和第三规则具有相同的特异性，我们希望第三个规则覆盖第二个规则，因此它必须以该顺序出现。
• 默认值0将适用于之前的所有项，如果没有宽项，并且宽项是奇数，则前面没有空格。

编辑：
做出不同的并且不符合OP要求的旧答案：

您可以单独使用CSS修改Bootstrap网格，以实现此目的 使用Flexbox网格（此处带有BS4β版本）：

/* Add .customized on a parent/ancestor of Bootstrap grid .row element to allow half-width items to be full width if there's room for that */ /* not for the last item: it'll still be half wide */ /* It overrides BS4β .col-sm-6 { flex: 0 0 50%; max-width: 50%; } */ .customized .col-sm-6:not(:last-child) { flex-grow: 1; max-width: 100%; }

它允许任何.col-sm-6占据其容器的整个宽度：

• 如果有空间，例如如果同一行上没有其他元素
• 和 - 如屏幕截图所示 - 如果不是最后一个。

➡️ Demo on Bootply 两种情况：.col-sm-6之前或之后.col-sm-12。