在使用bootstrap的項(xiàng)目中，使用了.card-columns來進(jìn)行瀑布流形式加載，但發(fā)現(xiàn)頁面寬度小于576是就容易發(fā)生內(nèi)容折斷的情況。經(jīng)觀察bootstrap源碼，原來在576以上寬度時(shí)給內(nèi)部card設(shè)置了display:inline-block的屬性。給全部媒體查詢設(shè)置后即解決問題。

效果：?http://e-art.top/page/friendlyLink.html

來源： https://weibo.com/1731935180/HuIqMhLnP

給元素加一個(gè)-webkit-column-break-inside:avoid; 比如 如果你用的ul加li的無序列表元素，那么就給li加這個(gè)css屬性。具體哪些瀏覽器支持，你自己去測一測，webkit內(nèi)核的加上前綴是沒問題的。需要指出的是，雖然國內(nèi)一票的國產(chǎn)瀏覽器都聲稱是webkit內(nèi)核，但是表現(xiàn)上還是沒有chrome做得好。比如說就這個(gè)例子，目前版本的chrome能夠盡量讓列的高度均勻，即它可能是通過計(jì)算決定被分割的列是應(yīng)該留在上一列還是分到下一列，國內(nèi)的webkit內(nèi)核（360jisu）就沒這么細(xì)。沒有經(jīng)過深入的測試，有不對的地方見諒。