css - Bootstrap 媒体组件 Columizing

Question

我有一个页面使用了 Bootstrap 框架的媒体组件。该页面列出了可供私有(private)音乐家购买的一组 CD。我想做的是当给定 CD 的列表超过 4 首歌曲时，它将为这些歌曲创建新的列。有人可以向我解释我该怎么做吗？

有人知道我的意思吗？

有人对此有想法吗？

<div class="media">
    <span class="media-left">
        <img class="media-object" src="assets/images/cds/cd1.png" alt="CD cover for first CD.">
    </span>
    <div class="media-body">
        <h2 class="media-heading">Name of CD</h2>
        <ol>
            <li>Song<span>Composer</span></li>
            <li>Song<span>Composer</span></li>
            <li>Song<span>Composer</span></li>
            <li>Song<span>Composer</span></li>
            <li>Song<span>Composer</span></li>
            <li>Song<span>Composer</span></li>
        </ol>
     </div>
</div>
<div class="media">
    <span class="media-left">
        <img class="media-object" src="assets/images/cds/cd2.png" alt="CD cover for second CD.">
    </span>
    <div class="media-body">
        <h2 class="media-heading">Name of CD</h2>
        <ol>
            <li>Song<span>Composer</span></li>
            <li>Song<span>Composer</span></li>
            <li>Song<span>Composer</span></li>
            <li>Song<span>Composer</span></li>
            <li>Song<span>Composer</span></li>
            <li>Song<span>Composer</span></li>
            <li>Song<span>Composer</span></li>
            <li>Song<span>Composer</span></li>
        </ol>
    </div>
</div>

Answer 1

您正在寻找 css 多列解决方案

http://caniuse.com/#feat=multicolumn

如您所见，浏览器支持看起来不太好。

您可以编写一些 js 代码来询问每个 ol 您的 li 的数量(长度)并向该列表添加一个类