Кладка Bootstrap Колонна (4) не все используемая, если не менее 6 пунктов существует

Question

http://www.bootply.com/brOEODSopK#

При выполнении этого кода в bootply, кажется, все работает отлично. Если вы уменьшаете отзывы до 5 или менее, все данные помещаются в столбцы 1 и 2, игнорируя столбцы 3 и 4, пока не будет найдено 6 или более отзывов. Можно ли это исправить? Если у меня есть 3 отзыва, оно должно распространяться на 3 столбца. Если у меня есть 4 она должна распространяться через 4.

Пожалуйста посоветуйте

Answer 1

КОД: http://codepen.io/Sky-123/pen/XpGWNX

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

<!-- jQuery library --> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

<!-- Latest compiled JavaScript --> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 


<div class="container testimonials-parent"> 
    <h1>Masonry CSS with Bootstrap</h1> 
    <div class="row"> 
      <div class="item col-md-4 col-lg-4"> 
       <blockquote> 
        <p>Fun : My son enjoys it. It did surprise me when it went from adding to “less than” and “greater than.”</p> 
        <footer>Dayna from United States about GS Kids! Preschool Numbers (Windows Store) on Sep 29, 2014</footer> 
       </blockquote> 
      </div> 
      <div class="item col-md-4 col-lg-4"> 
       <blockquote> 
        <p>Happy daughter and happy parents : Not glitchy, very encouraging for children, rewarding, entertaining, and best of all its educational. My daughter is transitioning between pre-k skills to kindergarten and this as well as other GS apps seem perfect. Will be upgrading.</p> 
        <footer>Robertson from United States about GS Kids! Preschool Numbers (Windows Store) on Sep 09, 2014</footer> 
       </blockquote> 
      </div> 
      <div class="item col-md-4 col-lg-4"> 
       <blockquote> 
        <p>Wow app : Great app for kids to learn and fancy their imagination.</p> 
        <footer>Ramanjit from India about GS Kids Paint &amp; Learn (Windows Store) on July 19, 2014</footer> 
       </blockquote> 
      </div> 
     </div> 
    <div class="row"> 
      <div class="item col-md-4"> 
       <blockquote> 
        <p>Love : we love coloring. Its great for us!!!</p> 
        <footer>Alfredo from United States about GS Kids Paint &amp; Learn (Windows Store) on Feb 05, 2014</footer> 
       </blockquote> 
      </div> 
      <div class="item col-md-4"> 
       <blockquote> 
        <p>My girls’ go to game : This is the app my 3yo picks every time she’s allowed on my computer. Sometimes the “crayon” will get stuck, but overall, it’s been a great app for her and her big sisters.</p> 
        <footer>Sandy from United States about GS Kids Paint &amp; Learn (Windows Store) on Feb 14, 2014</footer> 
       </blockquote> 
      </div> 
      <div class="item col-md-4"> 
       <blockquote> 
        <p>Good for learning Alphabets : My son is enjoying painting and learning Alphabets.</p> 
        <footer>Sulabha from India about GS Kids Paint &amp; Learn (Windows Store) on July 29, 2014</footer> 
       </blockquote> 
      </div> 
    </div> 

</div> 



testimonials-parent, *:before, *:after {box-sizing: border-box !important;} 


.testimonials-parent .row { 

-moz-column-gap: 1em;/* Firefox */ 
-webkit-column-gap:1em;/* Chrome, Safari, Opera */ 
column-gap:1em; 
} 



blockquote { 
    border-left: none; 
    margin: 0; 
    margin-bottom: 0.5em; 
    background-color: #00cccc; 
} 

blockquote p{ 
    color: #fff; 
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    font-style:oblique; 
    font-size: 1.125em; 
} 

blockquote footer{ 
    font-family: 'Helvetica Neue', Helvetica, sans-serif; 
    font-size: 0.875em; 
} 

blockquote p:before { 
    content: "\f10d"; 
    font-family: 'Fontawesome'; 
    float: left; 
    margin-right: 10px; 
}