Question

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

第1步 - 我在我的<head>中呼吁砌筑，如此：

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

中看到

但没有任何事情发生，这些专栏并没有像他们应该的那样占据正确的位置。

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

砌体不适用于Bootstrap 3

1 个答案: