jQuery 使用具有可变数量单元格的引导网格

Use bootstrap grid with variable number of cells

提问by spock99

I have a photo album application where a user can upload up to 50 pictures. I want the pictures to display 4 pictures to a row. The photo album is dynamic meaning a user can add and delete pictures via ajax.

我有一个相册应用程序，用户最多可以上传 50 张图片。我希望图片连续显示 4 张图片。相册是动态的，意味着用户可以通过ajax添加和删除图片。

How can the bootstrap grid be used if cells are added/deleted without having to re-adjust the DOM elements and rows constantly?

如果添加/删除单元格而不必不断重新调整 DOM 元素和行，如何使用引导网格？

For example if a user loads an existing photo album with 5 pictures the bootstrap grid looks like this:

例如，如果用户加载包含 5 张图片的现有相册，则引导网格如下所示：

<div class="row">
   <div class="col-md-3"> a bunch of html here </div>
   <div class="col-md-3"> a bunch of html here </div>
   <div class="col-md-3"> a bunch of html here </div>
   <div class="col-md-3"> a bunch of html here </div>
</div>

<div class="row">
   <div class="col-md-3"> a bunch of html here </div>
</div>

If the user deletes picture #2 the grid would be (no 2nd row, 5 element gets shifted to 4th element)

如果用户删除图片#2，网格将是（没有第 2 行，5 个元素被移动到第 4 个元素）

<div class="row">
   <div class="col-md-3"> a bunch of html here </div>
   <div class="col-md-3"> a bunch of html here </div>
   <div class="col-md-3"> a bunch of html here </div>
   <div class="col-md-3"> a bunch of html here </div>
</div>

Then the user adds 2 new pictures (via ajax), a new row is needed and 2 more columns.

然后用户添加 2 张新图片（通过 ajax），需要一个新行和 2 列。

<div class="row">
   <div class="col-md-3"> a bunch of html here </div>
   <div class="col-md-3"> a bunch of html here </div>
   <div class="col-md-3"> a bunch of html here </div>
   <div class="col-md-3"> a bunch of html here </div>
</div>

<div class="row">
   <div class="col-md-3"> a bunch of html here </div>
   <div class="col-md-3"> a bunch of html here </div>
</div>

Can bootstrap responsive design do this without rows or should I just use floating divs? Keep in mind these columns are all added/deleted via ajax (except for the initial page load) so I'm manipulating the DOM (rows/columns). Re-calculating rows/columns for every change would be a pain.

Bootstrap 响应式设计可以在没有行的情况下做到这一点，还是我应该只使用浮动 div？请记住，这些列都是通过 ajax 添加/删除的（初始页面加载除外），因此我正在操作 DOM（行/列）。为每次更改重新计算行/列会很痛苦。

回答by jmbertucci

First, to directly answer your question, you can simply put all columns in a single row.

首先，要直接回答您的问题，您可以简单地将所有列放在一行中。

<div class="row">
    <div class="col-md-3"> <img src="1"> </div>
    <div class="col-md-3"> <img src="2"> </div>
    <div class="col-md-3"> <img src="3"> </div>
    <div class="col-md-3"> <img src="4"> </div>
    <div class="col-md-3"> <img src="5"> </div>
    ...
    <div class="col-md-3"> <img src="50"> </div>
</div>

Every 4th item (since the grid is 12 columns and we're using 3 column width grids = 4 columns). Also, this technique always requires equal height columns or your columns won't wrap as expected. So if your pictures are different sizes and you're not scaling them fit inside a fixed height, you'll have some trouble.

每 4 个项目（因为网格是 12 列，我们使用 3 列宽网格 = 4 列）。此外，此技术始终需要等高的列，否则您的列不会按预期换行。因此，如果您的图片大小不同，并且您没有将它们缩放到固定高度，那么您会遇到一些麻烦。

It's not Bootstrap "illegal" do to the above. If fact, you'll see the Bootstrap site doing this by applying multiple column size per screen size classes on a single column, like this example off the Bootstrap site:

这不是 Bootstrap 对上述行为的“非法”行为。事实上，您会看到 Bootstrap 站点通过在单个列上为每个屏幕大小类应用多个列大小来执行此操作，例如 Bootstrap 站点上的这个示例：

<div class="row">
    <div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
    <div class="col-xs-6 col-sm-6 col-md-4">.col-xs-6 .col-sm-6 .col-md-4</div>
</div>
<div class="row">
    <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
    <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
    <!-- Optional: clear the XS cols if their content doesn't match in height -->
    <div class="clearfix visible-xs"></div>
    <div class="col-xs-6 col-sm-4 col-md-4">.col-xs-6 .col-sm-4 .col-md-4</div>
</div>

When the above is considered "Extra Small" (-xs-), the first column in the first row will span the entire width while the second column will span only half the width.

当上述内容被视为“超小”（-xs-）时，第一行中的第一列将跨越整个宽度，而第二列将仅跨越一半的宽度。

In the second row, you can see a similar thing. At "Extra Small" size, you will have three "505" width columns, which will give you two rows.

在第二行，您可以看到类似的内容。在“超小”尺寸下，您将拥有三个“505”宽度的列，这将为您提供两行。

Also, you can see an example of how to Clearfix columns if column rows don't match in height. They recommend inserting an empty div to clearfix.

此外，如果列行高度不匹配，您可以查看如何清除列的示例。他们建议插入一个空的 div 来清除修复。

I would also consider using a list and recommend not over-thinking it (which I find myself doing when using Bootstrap).

我也会考虑使用一个列表并建议不要过度思考它（我发现自己在使用 Bootstrap 时会这样做）。

In this case, consider something like this:

在这种情况下，请考虑这样的事情：

<ul id="image-list" class="row">
    <li class="col-sm-3"><img src="1"></li>
    <li class="col-sm-3"><img src="2"></li>
    ...
    <li class="col-sm-3"><img src="n-1"></li>
    <li class="col-sm-3"><img src="n"></li>
</ul>

I hope that helps!

我希望这有帮助！

Cheers

干杯

回答by pbuchheit

Just to supplement jmbertucci's answer, I managed to work out some css to work around the issue of images with varying heights. The css should be something like this:

只是为了补充 jmbertucci 的答案，我设法制定了一些 css 来解决不同高度的图像问题。css 应该是这样的：

  .thumbnail {
    height: 50px;
  }
  .thumbnail img {
    display: block;
    width: auto;
    height: 100%;
  }

Just add the thumbnail class to the parent of each image tag and you will get nice, even cells regardless of the differences in height.

只需将缩略图类添加到每个图像标签的父级，无论高度差异如何，您都会获得漂亮的单元格。