引导网格系统

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>

这是当前的样子：

如镜像所描述，第四个项目被创建并占据中间空间（这不应发生）。 它应该占用前一个（可用）空间。 我已经尝试过“ 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- *的高度相同