twitter-bootstrap Bootstrap 缩略图网格未正确开始新行

Question

提问by mattclar

I have a grid of thumbnails oin my rails app but I am having trouble getting bootstrap to display the grid correctly! As you can see below however it is not starting a new row correctly! not sure what to do here. I've included my HTML below and as far as I can see it conforms with the bootstrap examples.

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

what is displayed

显示什么

Answer 1

回答by Timichango

It's a height issue.

是身高问题。

I'm solving the same thing right now, and you basically have two options if you want to ditch the extraneous row containers, and have the whole set of columns grid out in a single row responsively:

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

you can make sure that all of the elements in your grid are the same height by constraining the content with css (or by simply controlling the content that gets shoved into each element)
You can add a little jQuery code to your page to scan your thumbnail elements, and expand their containers to the same height as the largest element in the grid. Google around for equal height jQuery plugins—there are a bunch. One additional thing you'll need to ensure that you do as well is to trigger the plugin again on resize, as it's likely that your elements will wind up with different heights again due to the responsive behaviours allowing content to expand/contract. A combination of bootstrap's col classes and a bit of jQuery height-balancing is working quite well for me.

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

Answer 2

回答by Adrian

I had a similar problem. I fixed with this script pretty quickly and painless free:

我有一个类似的问题。我很快就用这个脚本修复了这个脚本，而且没有痛苦：

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

for your case, replace '#projects_container' for '#image-grid' and add a class for each item div.

对于您的情况，将 '#projects_container' 替换为 '#image-grid' 并为每个项目 div 添加一个类。

Answer 3

回答by Bass Jobsen

Please describe or add images to show how your grid should look (desktop, tablet and mobile). Now we have to guess.

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

A row with class col-md-2 colomns can contain 6 columns (6 x 2 = 12). Try the code below, with nested columns (see: http://getbootstrap.com/css/#grid-nesting).

具有 col-md-2 colomns 类的行可以包含 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>

Answer 4

回答by Rob Bach

I had this problem using different sized images in a thumbnail div using the Bootstrap3 framework. This caused the rows and grids to break apart depending on image sizes. My work around was to use a nifty little jquery plugin called "equalize" and called it on the "row" class.

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

This worked perfectly, you should give it a try.

这工作得很好，你应该试一试。

Answer 5

回答by Jose Ospina

I decided to use display: inline-blockand manually configure the responsive columns instead of using the col-X-X class of bootstrap. I wanted 3 columns for XL screens and 2 for L, and 1 for the rest. This is the CSS I used.

我决定使用display: inline-block并手动配置响应列，而不是使用 bootstrap 的 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;
  }
}

Answer 6

回答by Dushan

This will solve your issue

这将解决您的问题

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

twitter-bootstrap Bootstrap 缩略图网格未正确开始新行

提问by mattclar

回答by Timichango

回答by Adrian

回答by Bass Jobsen

回答by Rob Bach

回答by Jose Ospina

回答by Dushan

相关推荐

最近更新

标签

twitter-bootstrap Bootstrap 缩略图网格未正确开始新行

提问by mattclar

回答by Timichango

回答by Adrian

回答by Bass Jobsen

回答by Rob Bach

回答by Jose Ospina

回答by Dushan

相关推荐

twitter-bootstrap Bootstrap 3.0 内联标题标签

twitter-bootstrap 增加字体真棒图标

twitter-bootstrap Twitter Bootstrap - 中心模态对话框

twitter-bootstrap Bootstrap 3 - 在按钮内垂直对齐字体很棒的图标

相关推荐

最近更新

标签