http://www.bootply.com/brOEODSopK#石造ブートストラップの列(4)すべての最小6つの項目がない限り使用されていないが、
存在し、すべてが完璧に動作表示されます。お客様の声を5つ以下に減らすと、すべてのデータが列1と2にプッシュされ、列3と4は無視され、6つ以上の覚えがあります。これを修正することは可能ですか?私が3つの功績を持っているならば、それは3つの列に広がるべきです。私は4を持っている場合は、お知らせください。4.
に広がるはずです
http://www.bootply.com/brOEODSopK#石造ブートストラップの列(4)すべての最小6つの項目がない限り使用されていないが、
存在し、すべてが完璧に動作表示されます。お客様の声を5つ以下に減らすと、すべてのデータが列1と2にプッシュされ、列3と4は無視され、6つ以上の覚えがあります。これを修正することは可能ですか?私が3つの功績を持っているならば、それは3つの列に広がるべきです。私は4を持っている場合は、お知らせください。4.
に広がるはずです
CODE: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 & 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 & 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 & 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 & 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;
}
Aakash Thakurは同じ解決策を提案しましたが、それは新しいものを作り出すので。データはデータベースと同じように異なる可能性があります。したがって、時にはレコードが1つまたは50個になることがあります。アイテムは、それぞれの列にお互いにちょうど積み重なる必要があります。上記のコードを使用すると、基本的に各行がハードにコーディングされます。これは、適切に積み重ねる能力を妨げる。 – Ginjo
あなたはブートストラップに慣れていませんか? –
私は昨年、それを利用してきました。だから、ちょっと新しいと思います。 – Ginjo
これが問題ないかどうかを確認してください:http://codepen.io/Sky-123/pen/XpGWNX –