ブートストラップの写真は私が私の写真を表示するために問題を抱えている

を表示し、ここではそれがどのように見えるかですブートストラップの写真は私が私の写真を表示するために問題を抱えている

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

2つの手法のいずれかを使用する必要があります。 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>

そうしないと、石積みのhttps://masonry.desandro.comのようなJSライブラリを使用するか、マイケル・コーカー

出典

2017-05-27 15:06:44

のコメントとして、純粋なCSS http://w3bits.com/css-masonry/を使用することができますが、このような何かを試すことができますか？

<!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

ブートストラップの写真は私が私の写真を表示するために問題を抱えている

答えて

関連する問題