引导缩略图网格未正确开始新行答案

【问题标题】：Bootstrap thumbnail grid not starting a new row correctly引导缩略图网格未正确开始新行
【发布时间】：2017-09-18 16:41:21
【问题描述】：

我的 Rails 应用程序中有一个缩略图网格，但我无法让引导程序正确显示网格！正如您在下面看到的那样，它没有正确开始新行！不知道在这里做什么。我在下面包含了我的 HTML，据我所知，它符合引导示例。

<div id="image-grid" class="col-lg-10">
<div class="row">
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/1"> 
<img alt="Img 0259" src="/system/images/images/000/000/001/thumb/IMG_0259.JPG?1369368826">
2013-05-24
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/3"> 
<img alt="Img 0034" src="/system/images/images/000/000/003/thumb/IMG_0034.JPG?1369649370">
2013-05-27
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/2"> 
<img alt="Img 0008" src="/system/images/images/000/000/002/thumb/IMG_0008.jpg?1369649198">
2013-05-27
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/4"> 
<img alt="Rsz 1971061 10153145204760484 336557482 n" src="/system/images/images/000/000/004/thumb/rsz_1971061_10153145204760484_336557482_n.jpg?1377656209">
2013-08-28
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/5"> 
<img alt="Digital radiograph1" src="/system/images/images/000/000/005/thumb/digital_radiograph1.jpg?1377659810">
2013-08-28
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/6"> 
<img alt="Pamo" src="/system/images/images/000/000/006/thumb/pamo.jpg?1377659876">
2013-08-28
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/7"> 
<img alt="Tooth x ray 1" src="/system/images/images/000/000/007/thumb/tooth-x-ray_1.jpg?1377659952">
2013-08-28
</a>            </div>  
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/8"> 
<img alt="Fig9b" src="/system/images/images/000/000/008/thumb/fig9b.jpg?1377664192">
2013-08-28
</a></div>
<div class="col-sm-6 col-md-2"> 
<span class="glyphicon glyphicon-plus">
<a href="/images/new">Upload New Image</a>
</span>
</div>
</div>
</div>

【问题讨论】：

每行中的列数（您可能知道）必须加起来为 12（或者您为一行中的列数设置的任何值）。为什么你只有一个行类而不将列包装在行类中是有原因的吗？您现在拥有的方式是单行类中有 36 列（sm）。
阿明谢谢你，我意识到列数应该加起来 12 但我相信在缩略图的情况下它应该溢出到一个新行的情况下有太多的一个排。我在想这可能是因为图像的高度不同
那么，在 2017 年你必须依靠 JS 逻辑来解决这个问题......好吧......

标签： css twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

这是身高问题。

我现在正在解决同样的问题，如果你想抛弃无关的行容器，并且响应式地将整组列网格化在一行中，你基本上有两个选择：

您可以通过使用 css 约束内容（或通过简单地控制被塞入每个元素的内容）来确保网格中的所有元素都具有相同的高度
您可以在页面中添加一些 jQuery 代码来扫描缩略图元素，并将它们的容器展开到与网格中最大元素相同的高度。谷歌搜索等高的 jQuery 插件——有很多。您需要确保您也这样做的另一件事是在调整大小时再次触发插件，因为由于允许内容扩展/收缩的响应行为，您的元素可能会再次以不同的高度结束。 bootstrap 的 col 类和一些 jQuery 高度平衡的组合对我来说效果很好。

【讨论】：

谢谢！！这现在对我有用:) 幸运的是，我在服务器端设置了缩略图大小，当它们是非标准的纵横比和方向时，问题就出现了。所以我只是使用了一点 CSS，如果它不起作用，请查看 javascript 解决方案。感谢您的帮助！

【解决方案2】：

我遇到了类似的问题。我很快就轻松地修复了这个脚本：

<script>
  $.getScript('//cdn.jsdelivr.net/isotope/1.5.25/jquery.isotope.min.js',function(){
    $('#projects_container').isotope({
      itemSelector : '.project_item',
      layoutMode : 'fitRows'
    });
  });
</script>

根据您的情况，将“#projects_container”替换为“#image-grid”并为每个项目 div 添加一个类。

【讨论】：

【解决方案3】：

请描述或添加图片以显示您的网格的外观（台式机、平板电脑和移动设备）。现在我们必须猜测。

具有 col-md-2 类列的行可以包含 6 列 (6 x 2 = 12)。试试下面的代码，嵌套列（参见：http://getbootstrap.com/css/#grid-nesting）。

<div class="container">     
<div class="row">
<div id="image-grid" class="col-sm-12 col-md-10">
<div class="row">
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/1"> 
<img alt="Img 0259" src="/system/images/images/000/000/001/thumb/IMG_0259.JPG?1369368826">
2013-05-24
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/3"> 
<img alt="Img 0034" src="/system/images/images/000/000/003/thumb/IMG_0034.JPG?1369649370">
2013-05-27
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/2"> 
<img alt="Img 0008" src="/system/images/images/000/000/002/thumb/IMG_0008.jpg?1369649198">
2013-05-27
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/4"> 
<img alt="Rsz 1971061 10153145204760484 336557482 n" src="/system/images/images/000/000/004/thumb/rsz_1971061_10153145204760484_336557482_n.jpg?1377656209">
2013-08-28
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/5"> 
<img alt="Digital radiograph1" src="/system/images/images/000/000/005/thumb/digital_radiograph1.jpg?1377659810">
2013-08-28
</a>            </div>
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/6"> 
<img alt="Pamo" src="/system/images/images/000/000/006/thumb/pamo.jpg?1377659876">
2013-08-28
</a>            </div>
</div>
<div class="row">
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/7"> 
<img alt="Tooth x ray 1" src="/system/images/images/000/000/007/thumb/tooth-x-ray_1.jpg?1377659952">
2013-08-28
</a>            </div>  
<div class="col-sm-6 col-md-2"> 
<a class="thumbnail text-center" href="/images/8"> 
<img alt="Fig9b" src="/system/images/images/000/000/008/thumb/fig9b.jpg?1377664192">
2013-08-28
</a></div>
</div>
</div>

<div class="col-sm-12 col-md-2"> 
<span class="glyphicon glyphicon-plus">
<a href="/images/new">Upload New Image</a>
</span>
</div>
</div>
</div>

【讨论】：

谢谢你，巴斯，我知道我可以通过编程方式解决这个问题，b 每 6 个图像添加一个新行，但这会破坏引导程序的响应性质，如果我每 6 个添加一个新行，它会看起来在桌面上很好，但正如您在小屏幕上看到的那样，我有宽度为 6 的缩略图，表示两行。我希望有一个响应式的解决方案
尝试使用 sm 并删除 md 并仅使用 sm，看看是否有帮助。 sm 类的工作方式类似于旧的跨度类。不是最好的解决方案，但我想值得一试
@mattclar 请参见此处的表格：github.com/bassjobsen/woocommerce-twitterbootstrap。我不明白为什么添加一行会破坏责任。但是您按照getbootstrap.com/css/#grid-example-mixed 的示例是正确的。他们添加了 b.e.连续 3 次 xs-6。

【解决方案4】：

我在使用 Bootstrap3 框架的缩略图 div 中使用不同大小的图像时遇到了这个问题。这导致行和网格根据图像大小分开。我的工作是使用一个漂亮的小 jquery 插件，称为“equalize”，并在“row”类上调用它。

效果很好，你应该试一试。

【讨论】：

【解决方案5】：

我决定使用display: inline-block 并手动配置响应列，而不是使用引导程序的 col-X-X 类。我想要 3 列用于 XL 屏幕，2 列用于 L，1 列用于其余屏幕。这是我使用的 CSS。

.section-card-col {
  margin-bottom: 22px;
  display: inline-block;
}

@media screen and (min-width: 1200px) {
  .section-card-col {
    width: calc(33% - 16px);
    margin-left: 8px;
    margin-right: 8px;
    vertical-align: top;
  }
}

@media screen and (min-width: 900px) and (max-width: 1199px) {
  .section-card-col {
    width: calc(50% - 16px);
    margin-left: 8px;
    margin-right: 8px;
    vertical-align: top;
  }
}

【讨论】：

【解决方案6】：

这将解决您的问题

<div class="col-xs-6 col-md-3">
   <div class="well">
       content goes here...
   </div>
</div>

【讨论】：