Question

我无法在代码中修复错误以及为什么会这样做。我有3个colunm而后者不适合在同一条线上。为什么她向下移动而不是在同一条线上？

我的代码： http://jsbin.com/kolobugosika/2/edit

感谢您的帮助

Answer 1

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

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

必须修改为：

<div class="container">
    <div class="row masonry">
        <div class="col-sm-4 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-4 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-4 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>
<!--/container-->

（请注意，在这段代码中可能会有一两个额外的div，但是你不是很有帮助，所以一定要检查一下你是否找到了另一个div，我只是在windows之间复制和粘贴我不会注册jsbin）

现在，让我们来看看你的JS：

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

如果你仔细检查，你会看到这一行：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类是一个鲜为人知的，很少使用和绝对可爱的砌体特色，这是专门为...响应网格！所以你添加了那个和voilá，你的模板开始按照假设工作

带有Masonry插件的Bootstrap

1 个答案: