Question

我使用了许多不同的方法尝试了这一点，而且每个方法似乎都有一些错误。

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

以下是我尝试过的一些尝试：

将图像直接放在<div>中。这有效，但不会在行和列中对齐它们。
使用引导程序row-fluid，然后将每个图像放在span2中，但这似乎会使图像浮动，有时会以不合需要的方式叠加在一起。
使用表格，但如果需要换行，这通常会留下悬空行。

在bootstrap中是否有惯用的方法，或者只是直接的HTML / CSS？

Answer 1

我想看看你的代码，但根据你给我的内容，我想为图像创建div并为所有这些创建一个类，它们在div周围用padding浮动它们。你可能不得不为不同的屏幕大小分别设置css，并将其大部分用于百分比。

Answer 2

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

.gallery .span2 img {width：100％;}

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

我相信bootstrap已经浮出了那些跨度？

Answer 3

在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

动态缩放每行图像数量，具体取决于屏幕宽度

3 个答案: