砌体不适用于 Bootstrap 3答案

【问题标题】：Masonry doesn't work with Bootstrap 3砌体不适用于 Bootstrap 3
【发布时间】：2015-02-23 21:21:21
【问题描述】：

我的问题是我无法让 Masonry 使用我的 Bootstrap 列（网格）。

第 1 步 - 我在 <head> 中调用了 Masonry，如下所示：

<script src="http://cdnjs.cloudflare.com/ajax/libs/masonry/3.1.5/masonry.pkgd.min.js"></script>

第 2 步 - 我编写了引导 html（这是我要应用 Masonry 的部分）：

<div class="row" id="container"> <!-- container begins -->

            <div class="col-lg-3 col-md-6  item"> <!-- 1st column starts -->
                     
                      <div class="well clearfix">

                <section>        
                             <img src="http://placehold.it/410x130" class="img-responsive visible-lg" alt="" style=" margin-bottom: 15px;">              
                              
                             <h2 id="post">This is my wordpress post title</h2>
                       
                        <div class="post-label">
                             <span class="label label-default">Aymen</span>
                             <span class="label label-default">Web Design</span>
                             <span class="label label-default">12-10-2014</span>
                             <span class="label label-default">Comments 24</span>
                        </div>
                    <hr>
                              <p id="post">
                        The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.
                              </p>
                    <hr>
                             <a href="#"><div class="more">Read More</div></a>
                             <a href="#"><div class="share">Share me</div></a>
                </section>
                      </div> 
            </div> <!-- 1st column ends -->


            <div class="col-lg-3 col-md-6  item"> <!-- 2nd column starts -->
                     
                      <div class="well clearfix">

                <section>        
                             <img src="http://placehold.it/410x130" class="img-responsive visible-lg" alt="" style=" margin-bottom: 15px;">              
                              
                             <h2 id="post">This is my wordpress post title</h2>
                       
                        <div class="post-label">
                             <span class="label label-default">Aymen</span>
                             <span class="label label-default">Web Design</span>
                             <span class="label label-default">12-10-2014</span>
                             <span class="label label-default">Comments 24</span>
                        </div>
                    <hr>
                              <p id="post">
                        The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.
                              </p>
                    <hr>
                             <a href="#"><div class="more">Read More</div></a>
                             <a href="#"><div class="share">Share me</div></a>
                </section>
                      </div> 
            </div> <!-- 2nd column ends -->

                        <div class="col-lg-3 col-md-6  item"> <!-- 2nd column starts -->
                     
                      <div class="well clearfix">

                <section>        
                             <img src="http://placehold.it/410x130" class="img-responsive visible-lg" alt="" style=" margin-bottom: 15px;">              
                              
                             <h2 id="post">This is my wordpress post title</h2>
                       
                        <div class="post-label">
                             <span class="label label-default">Aymen</span>
                             <span class="label label-default">Web Design</span>
                             <span class="label label-default">12-10-2014</span>
                             <span class="label label-default">Comments 24</span>
                        </div>
                    <hr>
                              <p id="post">
                        The Bootstrap 3 grid system has four tiers of classes: xs (phones), sm (tablets), md (desktops), and lg (larger desktops). You can use nearly any combination of these classes to create more dynamic and flexible layouts.
                              </p>
                    <hr>
                             <a href="#"><div class="more">Read More</div></a>
                             <a href="#"><div class="share">Share me</div></a>
                </section>
                      </div> 
            </div> <!-- 2nd column ends -->

        </div> <!-- container ends -->

第 3 步 - 我在 </body> 上方添加了 javascript 代码：

var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  // options
  columnWidth: 200,
  itemSelector: '.item'
});

第 4 步我将 .item 类添加到 col-lg-3 col-md-6，您可以在 第 1 步

中看到

但是什么也没有发生，列没有按照应有的方式放置在正确的位置。

【问题讨论】：

您的类层次结构错误。 container 然后row 然后col-*。
谢谢大卫，它工作得很好......

标签： javascript css twitter-bootstrap masonry

【解决方案1】：

这一切都有效，但既然您使用的是 Bootstrap，为什么要将列设置为固定宽度？

我会推荐这样的东西：

var container = document.querySelector('#container');
var msnry = new Masonry( container, {
  // options
  columnWidth: '.item',
  itemSelector: '.item'

这将使用 Bootstrap 的列宽百分比（例如 col-md-4 等的 33.33333%）而不是固定像素宽度。

为了清楚起见，HTML 需要看起来像这样：

<div id="container">
  <div class="row">
    <div class="col-md-3 item">
      Some content
    </div>
    <!--- More columns here as required --->
  </div>
</div>

【讨论】：