砌体不适用于Bootstrap 3

Question

My problem is that I can't make Masonry work with my Bootstrap columns (grid). 我的问题是我无法使用Bootstrap列（网格）使Masonry正常工作。

Step 1 - I called for the Masonry in my <head> like so : 步骤1-我在<head>要求砌石，如下所示：

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

Step 2 - I wrote my bootstrap html (this is the part I want to apply Masonry on) : 第2步-我编写了bootstrap 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 -->

Step 3 - I added the javascript code above </body> : 步骤3-我在</body>上方添加了javascript代码：

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

Step 4 I added .item class to col-lg-3 col-md-6 as yo ucan see in Step 1 步骤4我将.item类添加到col-lg-3 col-md-6就像您在步骤1中看到的那样

But nothing happens, the columns don't take their right places as they should. 但是什么也没发生，这些列没有按其应有的位置放置。

Answer 1

This all works, but since you're using Bootstrap, why are you setting the columns to a fixed width? 所有这些都可以，但是既然您使用的是Bootstrap，为什么要将列设置为固定宽度？

I would recommend something like this: 我建议这样的事情：

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

This will use Bootstrap's percentages for column widths (eg. 33.33333% for col-md-4 etc) rather than fixed pixel widths. 这将使用Bootstrap的百分比作为列宽（例如，对于col-md-4等为33.33333％），而不是固定的像素宽度。

And just for the sake of clarity, the HTML needs to look something like this: 只是为了清楚起见，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 个解决方案

解决方案1
0 2015-08-19 15:33:46

砌体不适用于Bootstrap 3

问题描述

1 个解决方案

解决方案1 0 2015-08-19 15:33:46

解决方案1
0 2015-08-19 15:33:46