트위터 부트 스트랩에서 여분의 공간을 제거하십시오.

상단과 하단 이미지 사이에 여분의 공간을 제거하고 싶습니다. 내 코드는 enter image description here 트위터 부트 스트랩에서 여분의 공간을 제거하십시오.

문제 내가 직면하고 .. 결과보기와 같은 코드를 실행 한 후

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>home</title> <link rel="stylesheet" href="css/bootstrap.css"/> <link rel="stylesheet" href="css/bootstrap.min.css"/> <link rel="stylesheet" href="css/style.css"/> </head> <body> <div class="container"> <div class="col-md-3 post-col"> <img src="home-1.jpg" alt="" class="post-image"/> <div class="col-md-12"> <h5>2 days ago by Admin</h5> <h4>Post title</h4> <p>Post description here Post description herePost description herePost description herePost description herePost description here</p> <p>Post description here Post description herePost description herePost description herePost description herePost description here</p> <p>Post description here Post description herePost description herePost description herePost description herePost description here</p> <p>Post description here Post description herePost description herePost description herePost description herePost description here</p> </div> </div> <div class="col-md-3 post-col"> <img src="home-1.jpg" alt="" class="post-image"/> <div class="col-md-12"> <h5>2 days ago by Admin</h5> <h4>Post title</h4> <p>Post description here Post description herePost description herePost description herePost description herePost description here</p> <p>Post description here Post description herePost description herePost description herePost description herePost description here</p> <p>Post description here Post description herePost description herePost description herePost description herePost description here</p> <p>Post description here Post description herePost description herePost description herePost description herePost description here</p> </div> </div> <div class="col-md-3 post-col"> <img src="home-1.jpg" alt="" class="post-image"/> <div class="col-md-12"> <h5>2 days ago by Admin</h5> <h4>Post title</h4> <p>Post description here Post description herePost description herePost description herePost description herePost description here</p> </div> </div> <div class="col-md-3 post-col"> <img src="home-1.jpg" alt="" class="post-image"/> <div class="col-md-12"> <h5>2 days ago by Admin</h5> <h4>Post title</h4> <p>Post description here Post description herePost description herePost description herePost description herePost description here</p> <p>Post description here Post description herePost description herePost description herePost description herePost description here</p> <p>Post description here Post description herePost description herePost description herePost description herePost description here</p> <p>Post description here Post description herePost description herePost description herePost description herePost description here</p> </div> </div> <div class="col-md-3 post-col"> <img src="home-1.jpg" alt="" class="post-image"/> <div class="col-md-12"> <h5>2 days ago by Admin</h5> <h4>Post title</h4> <p>Post description here Post description herePost description herePost description herePost description herePost description here</p> <p>Post description here Post description herePost description herePost description herePost description herePost description here</p> <p>Post description here Post description herePost description herePost description herePost description herePost description here</p> <p>Post description here Post description herePost description herePost description herePost description herePost description here</p> </div> </div> <div class="col-md-3 post-col"> <img src="home-1.jpg" alt="" class="post-image"/> <div class="col-md-12"> <h5>2 days ago by Admin</h5> <h4>Post title</h4> <p>Post description here Post description herePost description herePost description herePost description herePost description here</p> <p>Post description here Post description herePost description herePost description herePost description herePost description here</p> <p>Post description here Post description herePost description herePost description herePost description herePost description here</p> <p>Post description here Post description herePost description herePost description herePost description herePost description here</p> </div> </div> <div class="col-md-3 post-col"> <img src="home-1.jpg" alt="" class="post-image"/> <div class="col-md-12"> <h5>2 days ago by Admin</h5> <h4>Post title</h4> <p>Post description here Post description herePost description herePost description herePost description herePost description here</p> <p>Post description here Post description herePost description herePost description herePost description herePost description here</p> <p>Post description here Post description herePost description herePost description herePost description herePost description here</p> <p>Post description here Post description herePost description herePost description herePost description herePost description here</p> </div> </div> </div> <script src="js/jquery-2.1.1.min.js"></script> <script src="js/bootstrap.js"></script> <script src="js/bootstrap.min.js"></script> </body> </html>

입니다!

위 그림과 같이 맨 위 3 번째 이미지와 3 번째 이미지 사이에는 큰 간격이 있지만 이미지가 다른 이미지 아래에 있으면 추가 공간이 확보되지 않기를 원합니다.

Link

문제를 해결할 벽돌을 사용하여

출처

2014-11-30 Anonymous

masonry.js http://masonry.desandro.com/ 또는 css3 열 (예 : http://www.bootply.com/118335)을 사용하십시오. LESS 믹스를 사용하여 여기에 설명 된 css3 열에 대한 공급 업체 접두사를 생성 할 수 있습니다. http://getbootstrap.com/css/#less-mixins-vendor 제목 아래에 있습니다. – jme11

-1

..... 내가 원하는 샘플 예제를 보여줍니다.

출처

2014-12-01 17:36:32

트위터 부트 스트랩에서 여분의 공간을 제거하십시오.

답변

관련 문제