HTML 砌体布局问题 (asp.net)

Question

对于我的网站，我试图加入砌体以使内容布局得很好，但到目前为止我得到的结果非常奇怪。这是我的代码：

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm news-box" style="background-color:@color" 
     data-masonry='{ "columnWidth": ".masonry-container", "itemSelector": ".masonry-container" }'>
    <div class="masonry-container">
        <div class="contain">
            <img src="@w.Image" class="image img-responsive" />
            <div class="middle">
                @getReferrals(w.Id)
            </div>
        </div>
        <h4>@w.Title</h4>
        <p>@w.Body</p>
    </div>
</div>

如您所见，外部是具有砖石质量的。我没有使用 jquery，因为我无法让它工作，HTML 至少给了我（错误的）结果。无论如何，结果是这个神圣的混乱：

其他内容：此内容位于引导选项卡中。我在它们外面测试过，效果很好，但在里面却给我带来了问题。

如果可以，请帮助我！提前谢谢....

Answer 1

无论何时使用砌体，只要确保将规则放在行级别并针对列，否则布局会很奇怪。