Bootstrap Grid System

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 :

Как описано в изображении, четвёртый элемент получает созданы и занимает среднее место (которое не должно произойти). Он должен занимать предыдущее (доступное) пространство. Я пробовал свойство «float», но не следует ли это делать автоматически (путем Bootstrap)? Любая работа вокруг?

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> 

Кроме того, если первый столбец выше, чем остальные, она перемещает четвертый столбец в середине, поэтому убедитесь, что ваш div.col- * имеют одинаковую высоту