是否可以仅使用 Bootstrap 创建类似 pinterest 的布局？答案

【问题标题】：Is it possible to create a pinterest-like layout with Bootstrap only?是否可以仅使用 Bootstrap 创建类似 pinterest 的布局？
【发布时间】：2012-09-24 18:16:35
【问题描述】：

我正在努力解决这个问题已经有一段时间了：

是否可以仅使用 Twitter Bootstrap 创建 pinterest 布局？我知道有像 Masonry 这样的 jQuery 插件，但是没有它们就没有办法吗？

谢谢

【问题讨论】：

Masonry 或她的姐姐 Isotope 怎么了？人们很容易实现它mpezzi.github.com/bootstrap_isotope 或 maurizioconventi.com/2012/06/19/… 或 pknopf.com/blog/…
重要提示：任何纯 CSS 解决方案（截至 2016 年）都会从上到下排列项目，而不是从左到右。 Pinterest 布局在顶部显示最新项目，即从左到右，这是纯 CSS 无法做到的。

标签： layout twitter-bootstrap grid jquery-masonry

【解决方案1】：

在http://bragthemes.com/demo/pinstrap/ 找到一个（免费）模板。它应该有你所要求的一切。不过还没来得及检查。

编辑 2016-03-15：Bootstrap 4 允许开箱即用 here。它仍处于 alpha 阶段，但我们正在到达那里。

【讨论】：

使用javascript实现定位，不是bootstrap。

【解决方案2】：

找到了这个解决方案，在 bootstrap 中工作（即使没有定义列大小也可以工作），不需要 javascript——我将它捕捉到一个项目中，它工作得很好：

http://www.bootply.com/118335

祝福你@katiejones！

【讨论】：

一个华丽的解决方案。但是一个不跨浏览器兼容的。
IE 的解决方案是什么？
这是一个令人敬畏的答案。来自我的 +1。
也可以在 Edge 上使用

【解决方案3】：

编辑：现在在 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>

【讨论】：

你在在线面试测试中救了我。非常感谢！

【解决方案4】：

是的，这是可能的，但有一些限制。

原则

每一列都是一个div（或section，具体取决于您的布局含义）
在每一列中，每个图块也是 div 或 img 等，具体取决于您的设计。

练习

要制作列，您可以使用以下各种技术：

float专栏
display: inline-block 专栏
使用新的flexible box API（非标准实现正逐渐渗透到现代浏览器中）
使用新的grid positioning API（虽然我暂时避免这样做，因为它几乎不受支持）

然后在每一列中放置各种图块 (divs)。同样，根据您的设计/布局，您可以将 column-divs 替换为uls，并拥有一个磁贴列表 (lis)。我无法判断这在语义上是否适合您的设计。

限制

调整 Pinterest 页面的大小可以保持大多数元素的一般位置，即列顶部的元素通常保持在顶部附近，即使根据浏览器宽度调整列数 - 纯 CSS 解决方案不会'不要开箱即用。

解决方法

虽然不是完美的解决方案，但您可以使用media queries 来影响各种元素的位置。

一段时间后，人们可能会非常接近 Pinterest 布局 - 也就是说，他们选择使用 JavaScript 实现所述布局可能是有充分理由的。

【讨论】：

听起来很累。经过一些研究，我认为 JS 解决方案是可行的方法......
虽然这个解决方案仍然不切实际，因为它仍然缺乏浏览器支持 - 甚至距离你的回答已经一年多 - 这是我想知道的，但没有人谈论它。真的很高兴知道灵活的盒子 api 和 css 网格。感谢您的回答。

【解决方案5】：

我知道我的回答迟到了。但只是想更新这个常见问题。我发现了 3 个最新的实现。

isotope。在引导程序网站上找到了这个。也可以与 infinite-scroll 一起构建无限滚动网页。
Salvattore。这是通过纯 CSS 和 JS 实现的。 JS 只用于拉取数据。
masonry.desandro.com。这是一个 JS 密集型实现。但它有自己的特点。

【讨论】：

【解决方案6】：

自 Bootstrap 4 起，.card-columns 类可用。文档here 中的规范。它制作了一个漂亮的类似 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; }
}

【讨论】：

【解决方案7】：

我们有一个东西叫：bootstrap-waterfall:
http://mystist.github.io/bootstrap-waterfall/

但事实上，这个插件不需要引导程序，因为它是依赖项。这取决于您是想使用 bootstrap 作为 pin 的标记还是自己设置样式。

【讨论】：

【解决方案8】：

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

【讨论】：

【解决方案9】：

对于不想经历跨浏览器兼容性麻烦的每个人，这里有一个 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;?>

【讨论】：

这与使用像 Bootstrap 这样的跨浏览器工具的目的相矛盾，并且用户没有告知他是否可以访问服务器端脚本。
好吧，我看不出我的解决方案如何与引导程序的目的相矛盾。我在其中使用引导列类。我在我的一个项目中使用了相同的代码，它工作得很好。当您询问有关实施像引导程序这样的免费框架的问题时，“理解”该人在 99% 的情况下都可以访问服务器