我正在努力解决这个问题已经有一段时间了：
是否可以仅使用 Twitter Bootstrap 创建 pinterest 布局？我知道有像 Masonry 这样的 jQuery 插件，但是没有它们就没有办法吗？
谢谢
问问题
99644 次
9 回答
67
在http://bragthemes.com/demo/pinstrap/找到一个（免费）模板。它应该有你所要求的一切。不过还没来得及检查。
编辑 2016-03-15 ：Bootstrap 4 允许在这里开箱即用。它仍处于 alpha 阶段，但我们正在到达那里。
于 2013-01-27T20:41:39.810 回答
19
找到了这个解决方案，在引导程序中工作（即使没有定义列大小也可以工作），不需要 javascript——我将它捕捉到一个项目中，它工作得很好：
祝福你@katiejones！
于 2014-05-04T07:28:07.107 回答
14
编辑：这现在在 boostrap 4 http://v4-alpha.getbootstrap.com/components/card/#card-columns中开箱即用
确定的事情。我花了一段时间来锻炼。希望这可以帮助！
为代码转储道歉，但有必要显示网格工作。
<head>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/masonry.js"></script>
<script type="text/javascript" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/123941/imagesLoaded.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" integrity="sha512-dTfge/zgoMYpP7QbHy4gWMEGsbsdZeCXz7irItjcC3sPUFtf0kuFbDz/ixG7ArTxmDjLXDmezHubeNikyKGVyQ==" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" integrity="sha384-aUGj/X2zp5rLCbBxumKTCw2Z50WgIr1vs/PFN4praOTvYXWlVyh2UtNUU0KAUhAX" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
</head>
<div class="container">
<div class="row masonry-container">
<div class="col-xs-6 col-sm-3 col-md-3 item">
<div class="thumbnail">
<img src="http://lorempixel.com/150/200/abstract" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsumLorem ipsum dolosit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
</div><!--/.item -->
<div class="col-xs-6 col-sm-3 col-md-3 item">
<div class="thumbnail">
<img src="http://lorempixel.com/150/200/abstract" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsumLorem ipdolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
</div><!--/.item -->
<div class="col-xs-6 col-sm-3 col-md-3 item">
<div class="thumbnail">
<img src="http://lorempixel.com/150/200/abstract" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsumLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
</div><!--/.item -->
<div class="col-xs-6 col-sm-3 col-md-3 item">
<div class="thumbnail">
<img src="http://lorempixel.com/150/200/abstract" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsumLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
</div><!--/.item -->
<div class="col-xs-6 col-sm-3 col-md-3 item">
<div class="thumbnail">
<img src="http://lorempixel.com/150/200/abstract" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsumLorem ipsum dolor ctetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
</div><!--/.item -->
<div class="col-xs-6 col-sm-3 col-md-3 item">
<div class="thumbnail">
<img src="http://lorempixel.com/150/200/abstract" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsumLorem ipdolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
</div><!--/.item -->
<div class="col-xs-6 col-sm-3 col-md-3 item">
<div class="thumbnail">
<img src="http://lorempixel.com/150/200/abstract" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsumLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
</div><!--/.item -->
<div class="col-xs-6 col-sm-3 col-md-3 item">
<div class="thumbnail">
<img src="http://lorempixel.com/150/200/abstract" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsumLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eliLorem ipsum dolor sit amet, consectetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
</div><!--/.item -->
<div class="col-xs-6 col-sm-3 col-md-3 item">
<div class="thumbnail">
<img src="http://lorempixel.com/150/200/abstract" alt="">
<div class="caption">
<h3>Thumbnail label</h3>
<p>Lorem ipsumLorem ipsum dolor ctetur adipisicing eli dolor sit amet, consectetur adipisicing elit. </p>
</div>
</div>
</div><!--/.item -->
</div> <!--/.masonry-container -->
</div><!--/.tab-panel -->
<style type="text/css">
body {
padding-top: 50px;
}
.main-container {
padding: 10px 15px;
}
.p {
text-align: center;
}
</style>
<script type="text/javascript">
/* Demo Scripts for Making Twitter Bootstrap 3 Tab Play Nicely With The Masonry Library
* on SitePoint by Maria Antonietta Perna
*/
//Initialize Masonry inside Bootstrap 3 Tab component
(function( $ ) {
var $container = $('.masonry-container');
$container.imagesLoaded( function () {
$container.masonry({
columnWidth: '.item',
itemSelector: '.item'
});
});
//Reinitialize masonry inside each panel after the relative tab link is clicked -
$('a[data-toggle=tab]').each(function () {
var $this = $(this);
$this.on('shown.bs.tab', function () {
$container.imagesLoaded( function () {
$container.masonry({
columnWidth: '.item',
itemSelector: '.item'
});
});
}); //end shown
}); //end each
})(jQuery);
</script>
于 2015-10-24T17:02:34.857 回答
10
是的，这是可能的，但有一些限制。
原则
- 每列是一个
div（或section取决于您的布局的含义） - 根据您的设计，在每一列中，每个图块也是一个
div或等。img
实践
要制作列，您可以使用以下各种技术：
div然后在每列中放置各种瓷砖（ s）。同样，根据您的设计/布局，您可以将 column-divs 替换为uls，并拥有一个图块列表 ( lis)。我不能说这在语义上是否适合您的设计。
限制
- 调整 Pinterest 页面的大小可以保持大多数元素的一般位置，即列顶部的元素通常保持在顶部附近，即使根据浏览器宽度调整列数 -纯 CSS 解决方案不会这样做盒子。
变通办法
- 虽然不是一个完美的解决方案，但您可以使用媒体查询来影响各种元素的位置。
一段时间后，人们可能会非常接近 Pinterest 布局——也就是说，他们选择使用 JavaScript 实现所述布局可能是有充分理由的。
于 2012-09-24T18:35:36.070 回答
8
我知道我的回答迟到了。但只是想更新这个常见问题。我发现了 3 个最新的实现。
- 同位素。在引导程序网站上找到了这个。也适用于无限滚动以构建无限滚动网页。
- 萨尔瓦托。这是通过纯 CSS 和 JS 实现的。JS 只用于拉取数据。
- masonry.desandro.com。这是一个 JS 密集型实现。但它有自己的特点。
于 2014-12-10T04:37:54.867 回答
5
自Bootstrap 4以来，.card-columns该类可用。此处的文档中的规格。它制作了一个漂亮的类似 Pinterest 的网格。
<div class="card-columns">
<div class="card" id="card1"></div>
<div class="card" id="card2"></div>
<div class="card" id="card3"></div>
<div class="card" id="card4"></div>
<div class="card" id="card..."></div>
</div>
但是，关于列数，我很难适应不同的屏幕尺寸。我终于设法做到了：
@media (max-width: 575.98px){
.card-columns {
column-count: 1; }
}
@media (min-width: 576px){
.card-columns {
column-count: 2; }
}
@media (min-width: 768px){
.card-columns {
column-count: 3; }
}
@media (min-width: 992px){
.card-columns {
column-count: 4; }
}
@media (min-width: 1200px){
.card-columns {
column-count: 4; }
}
于 2020-04-17T13:31:00.847 回答
4
我们有一个名为：bootstrap-waterfall： http:
//mystist.github.io/bootstrap-waterfall/
但事实上，这个插件不需要引导程序，因为它是依赖项。这取决于您是想使用 bootstrap 作为 pin 的标记还是自己设置样式。
于 2015-05-29T02:49:40.820 回答
0
<div class="card-deck">
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
<div class="card">
<img class="card-img-top" src="..." alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Card title</h4>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div>
<div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small>
</div>
</div>
</div>于 2018-07-03T15:49:08.740 回答
-23
对于不想经历跨浏览器兼容性麻烦的每个人，这里有一个 PHP 解决方案。假设您将数据放在数组中，
<?php $iColumns = 4;?>
<?php for($i=0; $i < $iColumns; ++$i):?>
<div class="span3">
<?php
$j=$i;
while( isset( $aData[$j] ) ):
$oItem = $aData[$j]
?>
<div class="thumbnail" style="margin-top:10px;">
<a href="">
<img src="" alt=""/>
</a>
<h3>title</h3>
<p>caption</p>
</div>
<?php
$j=$j+$iColumns;
endwhile;?>
</div>
<?php endfor;?>
于 2013-03-11T13:04:12.687 回答