4

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

显示什么

4

6 回答 6

7

是身高问题。

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

  1. 您可以通过使用 css 约束内容来确保网格中的所有元素都具有相同的高度（或者通过简单地控制被推入每个元素的内容）

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

于 2013-09-25T05:36:21.270 回答
3

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

<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 添加一个类。

于 2014-01-13T22:54:37.950 回答
0

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

具有 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>
于 2013-09-15T18:34:03.363 回答
0

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

这非常有效，你应该试一试。

于 2014-09-26T16:21:00.430 回答
0

我决定使用display: inline-block并手动配置响应列，而不是使用 col-XX 类的引导程序。我想要 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;
  }
}
于 2017-09-18T08:41:21.493 回答
-2

这将解决您的问题

<div class="col-xs-6 col-md-3">
   <div class="well">
       content goes here...
   </div>
</div>
于 2014-09-04T09:41:21.317 回答