twitter-bootstrap bootstrap3 缩略图网格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18939958/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
bootstrap3 thumbnail grid
提问by jason
I find a tutorial about bootstrap grid, but it was written in bootstrap1.x. Now I want to use bootstrap3 to achieve the same effect. The doc says using .img-thumbnailinstead of .media-grid, but it seems still not work. What I want is something like this:
我找到了一个关于 bootstrap grid 的教程，但它是用 bootstrap1.x 编写的。现在想用bootstrap3来达到同样的效果。该文档说使用.img-thumbnail而不是.media-grid，但似乎仍然不起作用。我想要的是这样的：
The 1.x version is:
1.x 版本是：
<ul class="media-grid">
<li>
<a href="#">
<img src="http://placehold.it/290x200" />
</a>
</li>
<li>
<a href="#">
<img src="http://placehold.it/290x200" />
</a>
</li>
<li>
<a href="#">
<img src="http://placehold.it/290x200" />
</a>
</li>
<!-- row of 4 thumbnails -->
<li>
<a href="#">
<img src="http://placehold.it/210x140" />
</a>
</li>
<li>
<a href="#">
<img src="http://placehold.it/210x140" />
</a>
</li>
<li>
<a href="#">
<img src="http://placehold.it/210x140" />
</a>
</li>
<li>
<a href="#">
<img src="http://placehold.it/210x140" />
</a>
</li>
</ul><!-- end media-grid -->
回答by koala_dev
The .img-thumbnailclass is applied to images so they get that rounded border style, it's not a direct replacement for .media-grid, also if you want the images to be wrapped in a link then you're better off using the .thumbnailclass on the link itself as described here.
本.img-thumbnail类适用于图像，以便他们获得圆润的边框样式，它不是一个直接替换.media-grid，如果你还希望图像被包裹在一个链接，那么你最好使用该.thumbnail链接为自身阶级这里描述。
To build the actual grid you need to use Bootstrap 3's new grid system, your example would look like this:
要构建实际的网格，您需要使用 Bootstrap 3 的新网格系统，您的示例如下所示：
<div class="container">
<div class="row">
<div class="col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/400x200" alt="..." />
</a>
</div>
<div class="col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/400x200" alt="..." />
</a>
</div>
<div class="col-xs-4">
<a href="#" class="thumbnail">
<img src="http://placehold.it/400x200" alt="..." />
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/300x150" alt="..." />
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/300x150" alt="..." />
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/300x150" alt="..." />
</a>
</div>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img src="http://placehold.it/300x150" alt="..." />
</a>
</div>
</div>
</div>
Here's a demo fiddle
这是一个演示小提琴
And here's another fiddleif you don't need the links, just the thumbnail grid
如果您不需要链接，只需缩略图网格，这是另一个小提琴
回答by wali
<div class="container">
<div class="row">
<div class="col-xs-4">
Some Image
</div>
<div class="col-xs-4">
Some Image
</div>
<div class="col-xs-4">
Some Image
</div>
<div class="col-xs-3">
Some Image
</div>
<div class="col-xs-3">
Some Image
</div>
<div class="col-xs-3">
Some Image
</div>
<div class="col-xs-3">
Some Image
</div>
</div>
