ブートストラップグリッドシステム

Question

私が取り組んでいるプロジェクトは、ブートストラップグリッドシステムを利用したブログです。行の 3ブログ投稿、コード：画像で説明したように

<div class="container"> 

    <div class="row"> 

    <a href="/blog"><h4>News</h4></a> 

     <% blog.forEach(function(blog) { %> // Creates a blog and adds a title, image and body to it 
     <div class="col-md-4 col-sm-6"> 

     <div class="thumbnail"> 
      <img src="<%= blog.image %>"> //Adds image 
     </div> 

     <div class="caption"> 
      <a href="#"><h4><%= blog.title %></h4></a> //Adds image 
     </div> 

     <span><%= blog.created %></span> 

     <div class="relative"> 
      <p><%- blog.body %></p> //Adds body content 
      <div class="absolute"></div> 
     </div> 
     <a href="/blog/<%= blog._id %>">Read More</a> 

     </div> 

     <% }) %> 

    </div> 

This is how it currently looks :

、4番目の項目が作成され（起こるべきではない）の中間スペースを取ります。以前の（利用可能な）スペースを取る必要があります。私は "フロート"プロパティを試しましたが、自動的に（ブートストラップによって）そのようにしてはいけませんか？回避策はありますか？

Answer 1

これは、行の下に列だけがないためです。干渉する可能性のある列の前にタグがあります。 div.rowの外に移動してみてください。最初の列は残りの部分よりも高い場合

<div class="container"> 
    <a href="/blog"><h4>News</h4></a> 

    <div class="row"> 
     <% blog.forEach(function(blog) { %> // Creates a blog and adds a title, image and body to it 
     <div class="col-md-4 col-sm-6"> 

     <!-- Rest of the column --> 

     </div> 

    <% }) %> 

    </div> 
</div> 

はまた、中央の第4の列を移動するので、あなたのdiv.col- *が同じ高さ