HTML masonry 布局问题 (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 至少给我(错误的)结果。无论如何，结果是这个神圣的困惑:

其他:此内容位于 Bootstrap 选项卡内。我在他们外面测试了它，它工作得很好，但在里面却给我带来了问题。

如果可以请帮帮我!提前致谢....

Answer 1

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