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

Posted 2023-03-06

【中文标题】使用具有可变单元数的引导网格

【英文标题】：Use bootstrap grid with variable number of cells

【发布时间】：2013-11-05 15:14:08

【问题描述】：

我有一个相册应用程序，用户可以在其中上传最多 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>

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

【问题讨论】：

更多信息在这里：github.com/twbs/bootstrap/issues/9454

【参考方案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>

希望对你有帮助！

干杯

【讨论】：

使用列表有什么好处？

@Vic Semantics。这个想法是，这是一个没有特定顺序的相册中的照片列表。这就是选择无序列表的原因。 <div>、<span> 等没有语义意义。有一些好处，但总的来说，它为您的网站赋予了更多意义，这对谷歌等搜索引擎意味着更多。

【参考方案2】：

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

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

只需将缩略图类添加到每个图像标签的父级，您就会得到很好的，甚至单元格，而不管高度的差异。