Question

我试图为我的博客文章部分构建一个砌体网格，我几乎把它解决了一些问题.. 我甚至不确定砌体是否正常工作，或者我得到的效果仅仅是因为自举柱。

这是一个截图：

我试图建立的是砌体风格，其中帖子彼此接近，而不是它们之间的差距。我使用bootstrap作为帖子，我认为这可能是问题。（也许是因为帖子在行上？）

这是我使用的html：

      <!-- start blog-posts -->
  <div class="grid">
    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        <div class="grid-item">
          <!-- post1 -->
          <div class="card">
            <div class="icon-bg"><i class="fa fa-pencil-square fa-3x" aria-hidden="true"></i></div>
            <div class="card-block">
              <h6 class="post-category">Travelling</h6>
              <h4 class="card-title">Travel Best Adventure</h4>
              <h6 class="post-date">January 25, 2016</h6>
              <p class="card-text">
                Lorem ipsum doloirs sit amet, csatetur adipisicin, sed does eiusmod tehampor
                incididunt uts laboasre et dolhvaliqua. Ut enim  vem, nostrasuaations ullamco
                labiosi ut saaliquip exoi asea comoodo Disco choice is the have great work.
              </p>
              <a href="#" class="btn btn-primary more-btn">Read More</a>
              <hr>
              <div class="card-bottom">
                <div class="row">
                  <div class="col-xs-6">
                    <div class="comments">
                      <i class="fa fa-comments-o" aria-hidden="true"></i>
                      <p class="comm-nr">No Comment</p>
                    </div>
                  </div>
                  <div class="col-xs-6">
                    <div class="social-share">
                      <a href="#"><i class="fa fa-dribbble" aria-hidden="true"></i></a>
                      <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                      <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                      <a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- end post1 -->
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        <div class="grid-item">
          <!-- post2 -->
          <div class="card">
           <img class="card-img-top img-fluid" src="images/travel.jpg" alt="Post Image">
            <div class="icon-bg-pic"><i class="fa fa-picture-o fa-3x" aria-hidden="true"></i></div>
            <div class="card-block">
              <h6 class="post-category">Travelling</h6>
              <h4 class="card-title">Standard Image Post</h4>
              <h6 class="post-date">January 25, 2016</h6>
              <a href="#" class="btn btn-primary more-btn">Read More</a>
              <hr>
              <div class="card-bottom">
                <div class="row">
                  <div class="col-xs-6">
                    <div class="comments">
                      <i class="fa fa-comments-o" aria-hidden="true"></i>
                      <p class="comm-nr">No Comment</p>
                    </div>
                  </div>
                  <div class="col-xs-6">
                    <div class="social-share">
                      <a href="#"><i class="fa fa-dribbble" aria-hidden="true"></i></a>
                      <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                      <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                      <a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- end post2 -->
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        <div class="grid-item">
          <!-- post3 -->
          <div class="card">
            <div class="icon-bg"><i class="fa fa-pencil-square fa-3x" aria-hidden="true"></i></div>
            <div class="card-block">
              <h6 class="post-category">Fashion</h6>
              <h4 class="card-title">Simple Post Style</h4>
              <h6 class="post-date">January 02, 2016</h6>
              <p class="card-text">
                Lorem ipsum doloirs sit amet, csatetur adipisicin, sed does eiusmod
                tehampor choice is the have great work.
              </p>
              <a href="#" class="btn btn-primary more-btn">Read More</a>
              <hr>
              <div class="card-bottom">
                <div class="row">
                  <div class="col-xs-6">
                    <div class="comments">
                      <i class="fa fa-comments-o" aria-hidden="true"></i>
                      <p class="comm-nr">No Comment</p>
                    </div>
                  </div>
                  <div class="col-xs-6">
                    <div class="social-share">
                      <a href="#"><i class="fa fa-dribbble" aria-hidden="true"></i></a>
                      <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                      <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                      <a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- end post3 -->

        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        <div class="grid-item">
          <!-- post4 -->
          <div class="card">
            <div class="single-img-container">
              <div class="img-fluid center-block single-img"></div>
            </div>
          </div>
          <!-- end post4 -->
        </div>
      </div>

    </div>

    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        <div class="grid-item">
          <!-- post5 -->
          <div class="card">
            <div class="single-img2-container">
              <div class="img-fluid center-block single-img2"></div>
            </div>
          </div>
          <!-- end post5 -->
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        <div class="grid-item">
          <!-- post6 -->
          <div class="card quote-post">
            <div class="quote-icon-bg"><i class="fa fa-quote-left fa-3x" aria-hidden="true"></i></div>
            <div class="card-block">
              <p class="card-text">
                Lorem ipsum doloirs sit amet, csatetur adipisicin, sed does eiusmod tehampor
                incididunt uts laboasre et dolhvaliqua. Ut enim  vem, nostrasuaations ullamco
                labiosi ut saaliquip exoi asea comoodo Disco choice is the have great work.
              </p>
              <p class="quote-name">Nathalia Alexy</p>
            </div>
          </div>
          <!-- end post6 -->
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        <div class="grid-item">
          <!-- post7 -->
          <div class="card">
           <img class="card-img-top img-fluid" src="images/mountain-photo.jpg" alt="Post Image">
            <div class="icon-bg-pic"><i class="fa fa-picture-o fa-3x" aria-hidden="true"></i></div>
            <div class="card-block">
              <h6 class="post-category">Travelling</h6>
              <h4 class="card-title">Standard Image Post</h4>
              <h6 class="post-date">January 25, 2016</h6>
              <a href="#" class="btn btn-primary more-btn">Read More</a>
              <hr>
              <div class="card-bottom">
                <div class="row">
                  <div class="col-xs-6">
                    <div class="comments">
                      <i class="fa fa-comments-o" aria-hidden="true"></i>
                      <p class="comm-nr">No Comment</p>
                    </div>
                  </div>
                  <div class="col-xs-6">
                    <div class="social-share">
                      <a href="#"><i class="fa fa-dribbble" aria-hidden="true"></i></a>
                      <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                      <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                      <a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- end post7 -->
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        <div class="grid-item">
          <!-- post8 -->
          <div class="card">
            <div class="icon-bg"><i class="fa fa-pencil-square fa-3x" aria-hidden="true"></i></div>
            <div class="card-block">
              <h6 class="post-category">Lifestyle</h6>
              <h4 class="card-title">Without Image Post</h4>
              <h6 class="post-date">January 25, 2016</h6>
              <p class="card-text">
                Lorem ipsum doloirs sit amet, csatetur adipisicin, sed does eiusmod tehampor
                incididunt uts laboasre et dolhvaliqua. Ut enim  vem, nostrasuaations ullamco
                labiosi ut saaliquip exoi asea comoodo Disco choice is the have great work.
              </p>
              <a href="#" class="btn btn-primary more-btn">Read More</a>
              <hr>
              <div class="card-bottom">
                <div class="row">
                  <div class="col-xs-6">
                    <div class="comments">
                      <i class="fa fa-comments-o" aria-hidden="true"></i>
                      <p class="comm-nr">No Comment</p>
                    </div>
                  </div>
                  <div class="col-xs-6">
                    <div class="social-share">
                      <a href="#"><i class="fa fa-dribbble" aria-hidden="true"></i></a>
                      <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                      <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                      <a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- end post8 -->
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        <div class="grid-item">
          <!-- post9 -->
          <div class="card">
            <div class="card-block">
              <h6 class="post-category">Travelling</h6>
              <h4 class="card-title">Travel Best Adventure</h4>
              <h6 class="post-date">January 25, 2016</h6>
              <p class="card-text">
                Lorem ipsum doloirs sit amet, csatetur adipisicin, sed does eiusmod tehampor
                incididunt uts laboasre et dolhvaliqua. Ut enim  vem, nostrasuaations ullamco
                labiosi ut saaliquip exoi asea comoodo Disco choice is the have great work.
              </p>
              <a href="#" class="btn btn-primary more-btn">Read More</a>
            </div>
          </div>
          <!-- end post9 -->
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        <div class="grid-item">
          <!-- post10 -->
          <div class="card">
            <img class="card-img-top img-fluid" src="images/alone.jpg" alt="Post Image">
            <div class="icon-bg-video"><i class="fa fa-file-video-o fa-3x" aria-hidden="true"></i></div>
            <div class="card-block">
              <h6 class="post-category">Travelling</h6>
              <h4 class="card-title">Travel Best Adventure</h4>
              <h6 class="post-date">January 25, 2016</h6>
              <p class="card-text">
                Lorem ipsum doloirs sit amet, csatetur adipisicin, sed does eiusmod tehampor
                incididunt uts laboasre et dolhvaliqua. Ut enim  vem, nostrasuaations ullamco
                labiosi ut saaliquip exoi asea comoodo Disco choice is the have great work.
              </p>
              <a href="#" class="btn btn-primary more-btn">Read More</a>
              <hr>
              <div class="card-bottom">
                <div class="row">
                  <div class="col-xs-6">
                    <div class="comments">
                      <i class="fa fa-comments-o" aria-hidden="true"></i>
                      <p class="comm-nr">No Comment</p>
                    </div>
                  </div>
                  <div class="col-xs-6">
                    <div class="social-share">
                      <a href="#"><i class="fa fa-dribbble" aria-hidden="true"></i></a>
                      <a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                      <a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a>
                      <a href="#"><i class="fa fa-pinterest" aria-hidden="true"></i></a>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- end post10 -->
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        <div class="grid-item">
          <!-- post11 -->
          <div class="card link-post">
            <div class="icon-bg link-post-bg"><i class="fa fa-link fa-2x" aria-hidden="true"></i></div>
            <div class="card-block">
              <a href="https://www.facebook.com/">https://www.facebook.com/</a>
            </div>
          </div>
          <div class="card link-post">
            <div class="icon-bg link-post-bg"><i class="fa fa-windows fa-2x" aria-hidden="true"></i></div>
            <div class="card-block">
              <a href="https://www.facebook.com/">https://www.facebook.com/</a>
            </div>
          </div>
          <!-- end post11 -->
        </div>
      </div>
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        <div class="grid-item">
          <!-- post12 -->
          <div class="card">
            <div class="icon-bg"><i class="fa fa-music fa-3x" aria-hidden="true"></i></div>
            <div class="card-block">
              <h6 class="post-category">Audio Music</h6>
              <h4 class="card-title">Best Audio Player Post</h4>
              <h6 class="post-date">December 25, 2016</h6>
              <a href="#" class="btn btn-primary circle-btn"><i id="play-btn" class="fa fa-play" aria-hidden="true"></i></a>
            </div>
          </div>
          <!-- end post12 -->
        </div>
      </div>
    </div>
  </div>
  <!-- end blog-posts -->

砌体网格定位

0 个答案: