html - How to custom Bootstrap grid height? -
why bootstrap grid has height 591.067 ? did height came ?
.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 { 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>
as can see in image can't "prev" , "next" buttons below posts because of height.screen shot
your .mainpost
has margin-bottom: 100px
.
that culprit. remove , see happens. might need find different way space posts out. (search around flexbox) without clearer example it's hard though.
Comments
Post a Comment