Twitter bootstrap 3 带砌体插件的引导

我找不到修复代码中错误的方法，也找不到修复错误的原因。我有3个colunm，后者不适合同一行。为什么她要下楼而不是站在同一条线上

问题是：

我的代码：

---

感谢您的帮助

您有几个错误，第一个是关于引导的概念性错误。仅供参考，请记住行的总和必须是12（除非您使用的是自定义引导网格），因此您当前的代码

<div class="container">
    <div class="row masonry">
        <div class="col-sm-3 col-md-6">
            <div class="thumbnail">
                <img src="http://www.fakenamegenerator.com/dummyimage/230x230/CCCCCC/000000/1 " class="img-responsive" alt="Responsive image">
                <div class="caption">
                    <h3>Thumbnail label 1</h3>
                    <p>
                        Ergo ego senator inimicus, si ita vultis, homini, amicus esse, sicut semper fui, rei publicae debeo. Quid? si ipsas inimicitias, depono rei publicae causa, quis me tandem iure reprehendet, praesertim cum ego omnium meorum consiliorum atque factorum exempla semper ex summorum hominum consiliis atque factis mihi censuerim petenda.
                    </p>
                    <p>
                        <a href="#" class="btn btn-primary" role="button">Button</a><a href="#" class="btn btn-default" role="button">Button</a>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-3 col-md-3">
            <div class="thumbnail">
                <img src="http://www.fakenamegenerator.com/dummyimage/330x330/CCCCCC/000000/1 " class="img-responsive" alt="Responsive image">
                <div class="caption">
                    <h3>Thumbnail label 2</h3>
                    <p>
                        Ergo ego senator inimicus, si ita vultis, homini, amicus esse, sicut semper fui, rei publicae debeo. Quid? si ipsas inimicitias, depono rei publicae causa, quis me tandem iure reprehendet, praesertim cum ego omnium meorum consiliorum atque factorum exempla semper ex summorum hominum consiliis atque factis mihi censuerim petenda.
                    </p>
                    <p>
                        <a href="#" class="btn btn-primary" role="button">Button</a><a href="#" class="btn btn-default" role="button">Button</a>
                    </p>
                </div>
            </div>
        </div>
        <div class="col-sm-3 col-md-3">
            <div class="thumbnail">
                <img src="http://www.fakenamegenerator.com/dummyimage/230x230/CCCCCC/000000/1 " class="img-responsive" alt="Responsive image">
                <div class="caption">
                    <h3>Thumbnail label 3</h3>
                    <p>
                        Ergo ego senator inimicus, si ita vultis, homini, amicus esse, sicut semper fui, rei publicae debeo. Quid? si ipsas inimicitias, depono rei publicae causa, quis me tandem iure reprehendet, praesertim cum ego omnium meorum consiliorum atque factorum exempla semper ex summorum hominum consiliis atque factis mihi censuerim petenda.
                    </p>
                    <p>
                        <a href="#" class="btn btn-primary" role="button">Button</a><a href="#" class="btn btn-default" role="button">Button</a>
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>

如果仔细检查，您将看到这一行：

columnWidth:“[class*=”col-“]”

，这显然是错误的，因为类不能是columnWidth。这是一个错误，使用HTML标记修复程序修复了小屏幕的问题，但仍然不足以修复大屏幕，因此我们必须添加一点JavaScript：

$(document).ready(function () {
    var $container = $('.masonry');
    $container.imagesLoaded(function () {
        $container.masonry({
            itemSelector: '[class*="col-"]',
            columnWidth: container.querySelector('.grid-sizer')
        });
    });
});

---

.grid sizer

类是一个鲜为人知的、很少使用的、绝对可爱的砖石制品，专门用于。。。反应灵敏的网格！所以你加上它，瞧，你的模板开始按预期工作了

嗨，谢谢你的帮助。我已经像你的代码一样修改了我的代码。但是在jquery中，Mansonry不起作用。columnWidth:container.querySelector（“.grid sizer”）是一个砖石2，砖石3是一个字符串或元素，所以在这方面是正确的。我使用过你的jsbin，没有注意到你的版本，但它在jsbin中工作得很好，所以使用相同的版本。或者在我的Jsbin中尝试修改jquery，当屏幕变宽时，第三列不在右边，她正在拉down@Fabio试试你的代码，它不工作，因为它有一个错误与您的布局。使用封隔器

                 $(document).ready(function () {
            var $container = $('.masonry');
            $container.imagesLoaded(function () {
                $container.masonry({
                    itemSelector: '[class*="col-"]',
                    columnWidth: '[class*="col-"]'
                });
            });
        });

$(document).ready(function () {
    var $container = $('.masonry');
    $container.imagesLoaded(function () {
        $container.masonry({
            itemSelector: '[class*="col-"]',
            columnWidth: container.querySelector('.grid-sizer')
        });
    });
});