3列行中的随机间隙

Question

Here is what I mean，如您所见，第二行中有一个空格，丢失的面板被拖到不应该存在的第四行中。这没有道理。如果有帮助，我正在使用Bootstrap 3。让我知道你们是否还需要其他东西。

这是我的html：app\views\blog_posts\index.html.erb和scss：app\assets\stylesheets\blog_posts.scss

.banner {
  font-family: 'Pacifico', cursive;
  color: white;
  text-shadow: 1px 1px 8px $myw-pink;
  font-size: 80px;
  text-align: center;
  margin: 50px 0 40px 0;
}

.panel, .panel-default {
  .panel-blog-post {
    .panel-heading {
      padding: 0px;
      p {
        font-family: 'Pacifico', cursive;
        font-size: 30px;
        text-shadow: 2px 2px 2px black;
        text-align: center;
        padding: 15px;
        position: absolute;
      }
      img {
        width: 100%;
        border-radius: 2px 2px 0 0;
        // .blog-pic-style {
        //   &:hover {
        //     filter: brightness(200%);
        //     transition: ease 1s;
        //   }
        // }
      }
    }
  }
  .panel-body {
    img {
      border-radius: 100%;
    }
  }
}

.navbar {
  margin-bottom: 40px;
  background-color: $myw-pink;
  border: none;
  .navbar-header {
    margin: 0 50px 0 50px;
    button {
      border-width: 2px;
      border-color: white;
      &:hover {
        background-color: $myw-blue;
        transition: ease .25s;
      }
      &:focus {
        background-color: $myw-blue;
      }
      .icon-bar {
        background-color: white;
      }
    }
    .navbar-brand {
      color: white;
      font-family: 'Patua One', cursive;
      &:hover {
        color: $myw-blue;
        transition: ease .25s;
      }
    }
  }
  .collapse, .navbar-collapse {
    .nav, .navbar-nav, .navbar-right {
      margin: 0 50px 0 50px;
      li {
        a {
          color: white;
          font-family: 'Patua One', cursive;
          &:hover {
            color: $myw-blue;
            transition: ease .25s;
          }
        }
      }
    }
  }
}

.panel-default {
  border: none;
  font-family: 'Patua One', cursive;
  .panel-footer {
    background-color: $myw-blue;
  }
  .panel-heading {
    background-color: $myw-blue;
    color: white;
    a {
      color: white;
      text-decoration: none;
      &:hover {
        color: $myw-pink;
        transition: ease .25s;
        text-shadow: 2px 2px 2px white;
      }
    }
  }
}

.container {
  margin: 60px auto 20px auto;
}

.contact {
  margin: 20px 0 20px 0;
  text-align: center;
  .custom-button {
    height: 34px;
    margin: 0 auto 20px auto;
    width: 110px;
    border: solid white 3px;
    font-family: 'Patua One', cursive;
    font-size: 20px;
    a {
      text-decoration: none;
      color: white;
    }
    &:hover {
      background-color: $myw-pink;
      transition: ease .25s;
    }
  }
  .social-buttons {
    .facebook {
      @include social-button($facebook);
    }
    .twitter {
      @include social-button($twitter);
    }
    .linkedin {
      @include social-button($linkedin);
    }
  }
}

<div class="row">
  <% @blog_posts.each do |blog_post| %>
    <div class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-blog-post">
          <div class="panel-heading">
            <p><%= link_to blog_post.title, blog_post %></p>
            <!-- <div class="blog-pic-style"> -->
              <%= link_to (image_tag blog_post.blog_pic.url), blog_post %>
            <!-- </div> -->
          </div>
        </div>
        <div class="panel-body">
          by <%=  blog_post.user.username %>
          <% if blog_post.user.avatar.nil? %>
            <%= image_tag blog_post.user.avatar.url, size: 40 %>
          <% else %>
            <%= image_tag 'user.svg', size: 40 %>
          <% end %><br />
          <p><i>Created: <%= blog_post.created_at.strftime('%m/%d/%Y at %I:%M%p') %></i></p>
          <p><%= blog_post.blog[0..150] %>..<%= link_to "Read More", blog_post %></p>
        </div>
        <% if signed_in? && (current_user.role == "admin" || current_user.role == "manager") %>
          <div class="panel-footer">
            <%= link_to 'Edit', edit_blog_post_path(blog_post), class: "btn btn-warning" %>
            <%= link_to 'Destroy', blog_post, method: :delete, data: { confirm: 'Are you sure?' }, class: "btn btn-danger" %>
          </div>
        <% end %>
      </div>
    </div>
  <% end %>
</div>

预先感谢您的帮助！