是否有可能使用Bootstrap创build一个pinterest般的布局？
我正试图让我的头在这个相当长一段时间现在：
只有Twitter Bootstrap才能创build一个精简的布局？ 我知道有像砌体这样的jQuery插件，但没有它们，没有办法吗？
谢谢
find一个（免费）模板在http://bragthemes.com/demo/pinstrap/ 。 这应该是你所要求的。 虽然没有时间检查出来。
编辑2016-03-15 ：Bootstrap 4允许这里开箱。 这仍然是阿尔法，但我们到达那里。
发现这个解决scheme，在bootstrap内工作（即使没有定义列大小的作品），不需要JavaScript – 我把它捕捉到一个项目，它的工作原理：
祝福你@katiejones ！
是的，这是可能的，但有一些限制。
原理
- 每一列都是一个
div（或者根据你的布局的含义而定的部分） - 在每个栏中，每个瓷砖也是一个
div，或者img等，这取决于你的devise。
实践
为了使列可以使用以下各种技术：
-
float列 -
display: inline-block的列 - 使用新的灵活盒API （非标准的实现正在蔓延到现代浏览器）
- 使用新的网格定位API （尽pipe我现在要避免这一点，因为它几乎不被支持）
然后在各列中放置各种图块（ div ）。 再次，根据您的devise/布局，您可以用ul s来replacecolumn-div，并且有一个tile列表（ li s）。 我不能说你的devise在语义上是否正确。
限制
- 调整Pinterest页面的大小保持了大多数元素的一般位置，即，即使在列的数量根据浏览器宽度进行调整时，列顶部的元素通常仍然靠近顶部， 纯CSS解决scheme不会在盒子 。
变通
- 虽然不是一个完美的解决scheme，但您可以使用媒体查询来影响各种元素的位置。
有一段时间，人们可以非常接近Pinterest的布局 – 也就是说，他们select用JavaScript实现布局可能是一个很好的理由。
我知道我的回答迟到了。 但只是想要这个常见的问题是过时的。 我find了3个最新的实现。
- 同位素 。 在bootstrap网站上find这个。 与无限滚动运行良好，以build立无限的滚动网页。
- Salvattore 。 这是用纯CSS和JS实现的。 JS只是用来拉数据。
- masonry.desandro.com 。 这是一个JS密集型的实现。 但它有自己的特点。
编辑：这是现在开箱即用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>
我们有一个名为：bootstrap-waterfall：
http://mystist.github.io/bootstrap-waterfall/
但事实上，这个插件不需要引导，因为它是依赖关系。 这取决于你是否想使用引导作为你的引脚的标记或只是自己的样式。
对于不想跨浏览器兼容性的人来说，这是一个PHP解决scheme。 假设你有一个数组中的数据，
<?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;?>
