css - Masonry Bootstrap Columns(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;
}