Bootstrap媒體組件集合

Question

我有一個利用Bootstrap框架的媒體組件的頁面。該頁面列出了可供私人音樂家購買的一組CD。我試圖做的是，當列表達到超過4首歌曲的一個給定的CD，然後它會使這些歌曲的新列。有人可以向我解釋我該怎麼做？

有誰知道我是什麼是什麼意思？這個人

思考？

<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 multicoloumns的解決方案

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

如您所見，瀏覽器支持看起來不太好。

你可以寫一個小的js代碼，要求貴麗的每ol量（length）和類添加到列表