[英]Masonry doesn't work with Bootstrap 3
我的问题是我无法使用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的部分):
<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中看到的那样
但是什么也没发生,这些列没有按其应有的位置放置。
所有这些都可以,但是既然您使用的是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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.