自舉圖片顯示

我要展示我的照片有問題，在這裏是如何看起來像：自舉圖片顯示

current display

這裏是我怎麼想它是：

desired display

一切圖片應該在他的專欄的圖片下。下面是代碼：

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

<div class="row"> 
    <div class="col-md-3"> 
     <img src="http://placehold.it/1080x1080" class="img-responsive" style="margin-bottom:25px;"> 
    </div> 
    <div class="col-md-3"> 
     <img src="http://placehold.it/1080x1350" class="img-responsive" style="margin-bottom:25px;"> 
    </div> 
    <div class="col-md-3"> 
     <img src="http://placehold.it/566x1080" class="img-responsive" style="margin-bottom:25px;"> 
    </div> 
    <div class="col-md-3"> 
     <img src="http://placehold.it/1080x1080" class="img-responsive" style="margin-bottom:25px;"> 
    </div> 
    <div class="col-md-3"> 
     <img src="http://placehold.it/1080x1080" class="img-responsive" style="margin-bottom:25px;"> 
    </div> 
    <div class="col-md-3"> 
     <img src="http://placehold.it/1080x1350" class="img-responsive" style="margin-bottom:25px;"> 
    </div> 
    <div class="col-md-3"> 
     <img src="http://placehold.it/566x1080" class="img-responsive" style="margin-bottom:25px;"> 
    </div> 
    <div class="col-md-3"> 
     <img src="http://placehold.it/1080x1080" class="img-responsive" style="margin-bottom:25px;"> 
    </div> 
</div>

來源

2017-05-27 TakahT

您需要使用其中一種技巧。使用CSS，您可以創建列並製作像http://w3bits.com/css-masonry/的佈局，或者您可以使用像Masonry這樣的js庫https://masonry.desandro.com/ –

從bootstrap文檔：

如果超過12列被放置在單個行中，每一組額外的列的將作爲一個單元，換到一個新的線

所以我覺得應該有col-md-4 4級div標籤，並在每個div標籤，你把圖像變成這樣：

<div class="row"> 
    <div class="col-md-3"> 
     <img src="http://placehold.it/1080x1080" class="img-responsive" style="margin-bottom:25px;"> 
     <img src="http://placehold.it/1080x1350" class="img-responsive" style="margin-bottom:25px;"> 
     <img src="http://placehold.it/566x1080" class="img-responsive" style="margin-bottom:25px;"> 
    </div> 
    <div class="col-md-3"> 
     <!-- images --> 
    </div> 
    <div class="col-md-3"> 
     <!-- images --> 
    </div> 
    <div class="col-md-3"> 
     <!-- images --> 
    </div> 
</div>

否則，你可以使用一個js庫像砌體https://masonry.desandro.com或使用純CSS http://w3bits.com/css-masonry/邁克爾·科克爾的評論

來源

2017-05-27 15:06:44

，你可以嘗試這樣的事情？

<!DOCTYPE html> 
    <html lang="en"> 
    <head> 
     <title>Bootstrap Example</title> 
     <meta charset="utf-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    </head> 
    <body> 

    <div class="row"> 
     <div class="col-md-3"> 
      <div class="col-md-12"> 
       <img src="http://placehold.it/1080x1080" class="img-responsive" style="margin-bottom:25px;"> 
      </div> 
      <div class="col-md-12"> 
       <img src="http://placehold.it/1080x1350" class="img-responsive" style="margin-bottom:25px;"> 
      </div> 
      <div class="col-md-12"> 
       <img src="http://placehold.it/566x1080" class="img-responsive" style="margin-bottom:25px;"> 
      </div> 

      <div class="col-md-12"> 
       <img src="http://placehold.it/1080x1080" class="img-responsive" style="margin-bottom:25px;"> 
      </div> 
     </div> 
     <div class="col-md-3"> 
        <div class="col-md-12"> 
       <img src="http://placehold.it/566x1080" class="img-responsive" style="margin-bottom:25px;"> 
      </div> 
      <div class="col-md-12"> 
       <img src="http://placehold.it/1080x1080" class="img-responsive" style="margin-bottom:25px;"> 
      </div> 

      <div class="col-md-12"> 
       <img src="http://placehold.it/1080x1080" class="img-responsive" style="margin-bottom:25px;"> 
      </div> 
     </div> 
     <div class="col-md-3"> 
      <div class="col-md-12"> 
      <img src="http://placehold.it/1080x1350" class="img-responsive" style="margin-bottom:25px;"> 
     </div> 
     <div class="col-md-12"> 
      <img src="http://placehold.it/566x1080" class="img-responsive" style="margin-bottom:25px;"> 
     </div> 
     <div class="col-md-12"> 
      <img src="http://placehold.it/1080x1080" class="img-responsive" style="margin-bottom:25px;"> 
     </div> 
     </div> 
     <div class="col-md-3"> 
      <div class="col-md-12"> 
       <img src="http://placehold.it/566x1080" class="img-responsive" style="margin-bottom:25px;"> 
      </div> 
      <div class="col-md-12"> 
       <img src="http://placehold.it/1080x1080" class="img-responsive" style="margin-bottom:25px;"> 
      </div> 

      <div class="col-md-12"> 
       <img src="http://placehold.it/1080x1080" class="img-responsive" style="margin-bottom:25px;"> 
      </div> 
     </div> 




    </div> 

    </body> 
    </html>

您可能需要調整填充/邊距，它是響應式的。

來源

2017-05-27 15:22:38

自舉圖片顯示

回答

相關問題