如何自定義Bootstrap網格高度？

Question

爲什麼此Bootstrap網格的高度爲591.067？ 這個高度從何而來？

.main-post { 
 
    padding: 20px; 
 
    background-color: #FFF; 
 
    border: 1px solid #D8D8D8; 
 
    margin-bottom: 100px; 
 
} 
 

 
.main-post .post-categories { 
 
    margin-bottom: 10px 
 
} 
 

 
.main-post h3 { 
 
    margin: 0 0 10px; 
 
    color: #777; 
 
    letter-spacing: -1px; 
 
    font-weight: bold 
 
} 
 

 
.main-post .post-author, 
 
.main-post .post-date, 
 
.main-post .post-comments { 
 
    font-size: 12px 
 
} 
 

 
.main-post img { 
 
    display: block; 
 
    margin: 10px 0; 
 
} 
 

 
.main-post .post-summary { 
 
    line-height: 1.7; 
 
    color: #888 
 
} 
 

 
.main-post i { 
 
    color: #999 
 
}

   <div class="col-sm-6"> 
 
        <div class="main-post"> 
 
         <h3 class="post-title"> 
 
          <a href="#"> 
 
           Post Title 
 
          </a> 
 
         </h3> 
 
         <span class="post-author"> 
 
          <i class="fa fa-user fa-fw"></i> 
 
          Etsh 
 
         </span> 
 
         <span class="post-date"> 
 
         <i class="fa fa-calendar fa-fw"></i> 
 
          07/2017 
 
         </span> 
 
         <span class="post-comments"><i class="fa fa-comments fa-fw"></i> 
 
          No comments 
 
         </span> 
 
         <img src="http://www.placehold.it/300x300"> 
 
         <p class="post-summary"> 
 
          Test... 
 
         </p> 
 
         <hr> 
 
         <div class="post-categories"> 
 
          <i class="fa fa-tags fa-fw"></i> 
 
          Categories 
 
         </div> 
 
         <p class="post-tags"> 
 
          Tags 
 
         </p> 
 
        </div> 
 
       </div> 
 
      

正如你可以在圖片中看到我不能得到的「上一頁」因爲這個高度的帖子下面的「下一步」按鈕。

截圖：

Answer 1

你.mainpost有margin-bottom: 100px。

這可能是罪魁禍首。刪除它，看看會發生什麼。您可能需要找到一種不同的方式來分隔您的帖子。 （搜索flexbox）沒有一個更清晰的例子，很難說。