Html 自举网格系统

我正在从事的项目有一个博客，利用了引导网格系统。 一行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>

//创建博客并向其添加标题、图像和正文
“>//添加图像
//添加图像
//添加正文内容

---

如图中所述，第四项被创建并占用中间空间（不应该发生）。它应该占用上一个（可用）空间。我尝试了“float”属性，但不应该自动这样做（通过引导）？任何解决方法？

这可能是因为您的行下方不只有列。您的列前面有一个标记，可能会产生干扰。请尝试将其移到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-*的高度相同

添加最大高度图像和添加最小高度标题文本