1

我已经尝试过使用多种不同的方法，但每种方法似乎都有一些错误。

我需要显示相对大量的图像（大约 50 个）整齐地排列在行和列中。但是，我需要根据屏幕宽度调整每行的长度。

以下是我进行的一些尝试：

  1. 将图像直接放入<div>. 这有效，但不能将它们按行和列对齐。
  2. 使用 bootstrap row-fluid，然后将每个图像放入 a span2，但这似乎会使图像浮动，有时会以不合需要的方式相互堆叠。
  3. 使用表格，但是如果需要换行，这通常会留下悬空的行。

有没有一种惯用的方法可以在引导程序中执行此操作，或者只是直接的 HTML/CSS？

4

3 回答 3

1

我想查看您的代码，但根据您给我的内容，我想为图像创建 div 并为所有图像创建一个类，使它们在 div 周围有填充物向左浮动。不过，您可能必须针对不同的屏幕尺寸使用单独的 css，并且其中很多都基于百分比。

于 2013-08-08T15:28:11.647 回答
1

您可以在图像上放置 100% 的宽度值吗？

.gallery .span2 img{宽度：100%;}

<div class="gallery">
<div class="span2"><img></div>
<div class="span2"><img></div>
<div class="span2"><img></div>
</div>

我相信引导程序已经浮动了这些跨度吗？

于 2013-08-08T15:39:14.313 回答
1

在 Bootstrap 2.x 中，您需要使用媒体查询来自定义列数（行长）的布局。例如，这将创建 2 列的span3平板电脑大小。

/* responsive media query */
@media (min-width: 768px) and (max-width: 980px) {
  .span3 {
    width:41% !important;
  }
  .span3:nth-child(odd) {
    margin-left:0;
  }
}

这是一个 2.x 演示：http ://bootply.com/72915

在 Bootstrap 3 中，使用新的网格大小变得容易得多。

这是 3.0 RC1 演示：http ://bootply.com/70929

于 2013-08-08T15:56:25.957 回答