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

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

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

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