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

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),需要一个新行和另外两列.

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

可以自举响应设计没有行这样做或我应该只使用浮动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>

我希望有所帮助!

干杯