引導網格系統

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- *的高度相同