Question

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

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

例如，如果用户加载包含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>

如果用户删除图片＃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>

然后用户添加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>

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

Answer 1

首先，要直接回答您的问题，您只需将所有列放在一行中即可。

<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>

每隔4个项目（因为网格是12列，我们使用3列宽度网格= 4列）。此外，此技术始终需要相等的高度列，否则您的列将无法按预期进行换行。因此，如果你的照片尺寸不同而你没有将它们缩放到一个固定的高度内，你就会遇到麻烦。

对于上述内容，不是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>

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

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

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

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

在这种情况下，请考虑以下事项：

<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>

我希望有所帮助！

干杯

Answer 2

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

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

只需将缩略图类添加到每个图像标记的父级中，无论高度如何，您都会获得很好的，甚至是细胞。

使用具有可变数量单元格的bootstrap网格

2 个答案: