我有一个新闻文章页面，我可以在其中指定文章的宽度，如下所示:
<div class="<%# GetArticleSize(Item.ArticleSize) %>">
它以下列之一呈现框元素:
- col-lg-3 col-md-3 col-sm-3 col-xs-6(小尺寸)
- col-lg-6 col-md-6 col-sm-6 col-xs-6(半码)
- col-xs-12(全尺寸)
如果所有新闻文章都是 col-sm-3，则砌体布局将完美运行(查看此链接 HERE 以获得使用此链接时的完美结果)..
当我将其中一篇新闻文章设置为 col-sm-6(半页大小)时，问题就来了。
看到这张图片:
它似乎没有足够的空间容纳最后一个 col-sm-3 元素，它包裹在下面，并在所有其他新闻文章上创建一个奇怪的外观。
这是一个JSFIDDLE来说明代码.. 但是.. 这段代码可以正常工作并像它应该的那样包装..
我不知道是什么原因造成的。也许你们中有人知道如何纠正这个问题？
已更新!! 当我将砌体目标从容器更改为网格 items 本身时，它至少跨越了整个宽度，但它太宽了..
$('.grid-item').masonry({
columnWidth: 200
});
<asp:ListView ID="lvArticles" runat="server" EnableViewState="False" ItemType="Servicelayer.Article" OnItemCommand="lvArticles_OnItemCommand" OnItemDataBound="lvArticles_OnItemDataBound">
<ItemTemplate>
<div class="grid-item <%# GetArticleSize(Item.ArticleSize) %>">
哪个...呈现为:
<div id="article-list" class="widget-container row">
<div class="grid-item widget-news widget-box col-lg-6 col-md-6 col-sm-6 col-xs-6" style="position: relative; height: 277.5px;">
<div class="action-container" style="position: absolute; left: 15px; top: 0px;">
</div>
<div class="widget-content visible priority" style="position: absolute; left: 15px; top: 0px;">
<div class="header">
<p>
<a id="MainContent_lvArticles_lnkViewArticle_0" href="javascript:__doPostBack('ctl00$MainContent$lvArticles$ctrl0$lnkViewArticle','')">A-lagsjentene på oppdrag for CC Gjøvik</a>
</p>
<p></p>
</div>
<div class="row item">
<p>
</p><div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<img class="article-image" src="http://127.0.0.1:10000/devstoreaccount1/images/125895ba-b174-4356-93f2-2371f1a84403logo_Deloitte.png">
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 article-image-subtext">
Mari Finstad Bergum og Emma Fauchald
</div>
<p class="articletags"></p>
<p></p>
</div>
<div class="widget-content-footer">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3">
<div class="avatar-container">
<img class="avatar" src="https://klubbweb.blob.core.windows.net/clubid21/81ae3567-3038-4299-9d91-8365ffef185bavatar24.jpg" enableviewstate="False">
</div>
</div>
<div class="col-sm-9">
<div class="created-by">
<p>Marthe Godtlund Bråthen</p>
<p>19.09.2016 11:46</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid-item widget-news widget-box col-lg-3 col-md-3 col-sm-3 col-xs-6" style="position: relative; height: 493.5px;">
<div class="action-container" style="position: absolute; left: 15px; top: 0px;">
</div>
<div class="widget-content visible priority" style="position: absolute; left: 15px; top: 0px;">
<div class="header">
<p>
<a id="MainContent_lvArticles_lnkViewArticle_1" href="javascript:__doPostBack('ctl00$MainContent$lvArticles$ctrl1$lnkViewArticle','')">NM-gull til ni Gjøvik HK-jenter!</a>
</p>
<p></p>
</div>
<div class="row item">
<p>
</p><div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<img class="article-image" src="https://klubbweb.blob.core.windows.net/clubid21/da2d0d26-e00e-4b10-84db-76adf999ba6eIMG_6263.JPG">
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 article-image-subtext">
Region Innlandet med ni Gjøvik HK-jenter kunne juble for gull i region-NM.
</div>
<p class="articletags">Tags: Region-Nm 2016, Nm-Gull, Nm-Gullvm-Gull, Nm-Gull, Nm-Gullvm-Gull</p>
<p></p>
</div>
<div class="widget-content-footer">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3">
<div class="avatar-container">
<img class="avatar" src="https://klubbweb.blob.core.windows.net/clubid21/81ae3567-3038-4299-9d91-8365ffef185bavatar24.jpg" enableviewstate="False">
</div>
</div>
<div class="col-sm-9">
<div class="created-by">
<p>Marthe Godtlund Bråthen</p>
<p>25.04.2016 17:45</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid-item widget-news widget-box col-lg-3 col-md-3 col-sm-3 col-xs-6" style="position: relative; height: 317px;">
<div class="action-container" style="position: absolute; left: 15px; top: 0px;">
</div>
<div class="widget-content visible" style="position: absolute; left: 15px; top: 0px;">
<div class="header">
<p>
<a id="MainContent_lvArticles_lnkViewArticle_2" href="javascript:__doPostBack('ctl00$MainContent$lvArticles$ctrl2$lnkViewArticle','')">Dokument nå da ? </a>
</p>
<p></p>
</div>
<div class="row item">
<p>
</p><div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<img class="article-image" src="http://127.0.0.1:10000/devstoreaccount1/images/5695dc5d-c580-4cd2-94dd-4ab853539839bgyeah.jpg">
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 article-image-subtext">
</div>
<div class="col-xs-12">
<a style="text-decoration: underline" target="_blank" class="article-text" href="http://127.0.0.1:10000/devstoreaccount1/images/6803c4b4-0c8c-4f20-a613-13ab72bf7ec7Hekk planter barlind bestilling.xlsx">Hekk planter barlind bestilling.xlsx</a>
</div>
<p class="articletags"></p>
<p></p>
</div>
<div class="widget-content-footer">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3">
<div class="avatar-container">
<img class="avatar" src="http://127.0.0.1:10000/devstoreaccount1/images/875bcc1f-5d70-4d74-88bd-55deb482ec9favatar5.jpg" enableviewstate="False">
</div>
</div>
<div class="col-sm-9">
<div class="created-by">
<p>Terje Nygård</p>
<p>31.03.2017 19:57</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid-item widget-news widget-box col-lg-3 col-md-3 col-sm-3 col-xs-6" style="position: relative; height: 159px;">
<div class="action-container" style="position: absolute; left: 15px; top: 0px;">
</div>
<div class="widget-content visible" style="position: absolute; left: 15px; top: 0px;">
<div class="header">
<p>
<a id="MainContent_lvArticles_lnkViewArticle_3" href="javascript:__doPostBack('ctl00$MainContent$lvArticles$ctrl3$lnkViewArticle','')">Dokument ? </a>
</p>
<p></p>
</div>
<div class="row item">
<p>
</p><p class="articletags"></p>
<p></p>
</div>
<div class="widget-content-footer">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3">
<div class="avatar-container">
<img class="avatar" src="http://127.0.0.1:10000/devstoreaccount1/images/875bcc1f-5d70-4d74-88bd-55deb482ec9favatar5.jpg" enableviewstate="False">
</div>
</div>
<div class="col-sm-9">
<div class="created-by">
<p>Terje Nygård</p>
<p>31.03.2017 19:53</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid-item widget-news widget-box col-lg-3 col-md-3 col-sm-3 col-xs-6" style="position: relative; height: 326px;">
<div class="action-container" style="position: absolute; left: 15px; top: 0px;">
</div>
<div class="widget-content visible" style="position: absolute; left: 15px; top: 0px;">
<div class="header">
<p>
<a id="MainContent_lvArticles_lnkViewArticle_4" href="javascript:__doPostBack('ctl00$MainContent$lvArticles$ctrl4$lnkViewArticle','')">Test..</a>
</p>
<p></p>
</div>
<div class="row item">
<p>
</p><div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<img class="article-image" src="http://127.0.0.1:10000/devstoreaccount1/images/a51d287c-d160-4ba4-9765-aae2cf185973boss.jpg">
</div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 article-image-subtext">
Boss.
</div>
<p class="articletags"></p>
<p></p>
</div>
<div class="widget-content-footer">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3">
<div class="avatar-container">
<img class="avatar" src="http://127.0.0.1:10000/devstoreaccount1/images/875bcc1f-5d70-4d74-88bd-55deb482ec9favatar5.jpg" enableviewstate="False">
</div>
</div>
<div class="col-sm-9">
<div class="created-by">
<p>Terje Nygård</p>
<p>31.03.2017 19:51</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="grid-item widget-news widget-box col-lg-3 col-md-3 col-sm-3 col-xs-6" style="position: relative; height: 160px;">
<div class="action-container" style="position: absolute; left: 15px; top: 0px;">
</div>
<div class="widget-content visible" style="position: absolute; left: 15px; top: 0px;">
<div class="header">
<p>
<a id="MainContent_lvArticles_lnkViewArticle_5" href="javascript:__doPostBack('ctl00$MainContent$lvArticles$ctrl5$lnkViewArticle','')">Møtereferat ja</a>
</p>
<p></p>
</div>
<div class="row item">
<p>
</p><div class="col-xs-12">
<a style="text-decoration: underline" target="_blank" class="article-text" href="http://127.0.0.1:10000/devstoreaccount1/images/987ceade-e6db-430b-84ac-c23e1194a3b1Håndball - Øvelser og program.docx"></a>
</div>
<p class="articletags"></p>
<p></p>
</div>
<div class="widget-content-footer">
<div class="row">
<div class="col-sm-12">
<div class="row">
<div class="col-sm-3">
<div class="avatar-container">
<img class="avatar" src="http://127.0.0.1:10000/devstoreaccount1/images/875bcc1f-5d70-4d74-88bd-55deb482ec9favatar5.jpg" enableviewstate="False">
</div>
</div>
<div class="col-sm-9">
<div class="created-by">
<p>Terje Nygård</p>
<p>31.03.2017 18:44</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>我最终得到的结果是这样的:
最佳答案
Masonry FAQ: The first item breaks the grid!
You most likely need to set the
columnWidthoption. Without columnWidth set, Masonry will use the width of the first item for the size of its columns.
$('.grid').masonry({
columnWidth: 200
});
关于html - 将 Masonry 与 Bootstrap Columns 一起使用时的包装问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43161547/