html - Bootstrap跨度之间的奇怪空间

Question

我正在使用一行来显示一个产品列表，其中一个 span9 作为容器，每个产品都有一个 span3 大小，每行给出 3 个。

但我看到了一个奇怪的现象，有些跨度没有显示每行 3 个。

像这样：（查看全尺寸图片）

引导版本是 2.3.2，我正在使用响应功能。

希望有人可以提供帮助。谢谢

Answer 1

通过查看您的图像，问题似乎实际上是浮动未清除。请注意，灰色长袖衬衫（第 1 列，第 2 行）有四行描述，而其他所有内容都有 3 行。使用 Bootstrap，您需要使用 div class="row" 包装每组跨度。另一种解决方法可能是应用 clear:left; 到每四个跨度。像这样的东西：

.product-container .span3:nth-child(4n+4) { clear: left; }

Answer 2

您可能必须覆盖class*="span"选择器。

div [class*="span"] {
  margin-left: 0;
}

Answer 3

您可以尝试使用索引的模块 (%3) 在跨度周围添加行。所以你的功能会是这样的：

while($products as $key => $product) {
    //Put product info here
    if($key%3 = 2){
        echo "</row><row>";
    }
}