画像ギャラリーで空白を取り除く方法

Question

こんにちは、これは正しい言葉ですが、画像ギャラリーをビルドストラップでビルドしています。つまり、基本的にはすべてがサイズ違いで、私の問題は私です私のガレージの間に大きなギャップがあり、私はそれをどのように取り除くことができるのだろうと思っていた。私の問題は、次のようになります。

<div class="row"> 
    <div class="card-columns"> 
    <div class="card"> 
     <img class="card-img-top" src="http://placehold.it/500x600" alt="Card image cap"> 
    </div> 
    <div class="card"> 
     <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap"> 
    </div> 
    <div class="card"> 
     <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap"> 
    </div> 
    <div class="card"> 
     <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap"> 
    </div> 
    <div class="card"> 
     <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap"> 
    </div> 
    <div class="card"> 
     <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap"> 
    </div> 
    <div class="card"> 
     <img class="card-img-top" src="http://placehold.it/500x700" alt="Card image cap"> 
    </div> 
    </div> 
</div> 
    <div class="row"> 
    <div class="card-columns"> 
    <div class="card"> 
     <img class="card-img-top" src="http://placehold.it/500x600" alt="Card image cap"> 
    </div> 
    <div class="card"> 
     <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap"> 
    </div> 
    <div class="card"> 
     <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap"> 
    </div> 
    <div class="card"> 
     <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap"> 
    </div> 
    <div class="card"> 
     <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap"> 
    </div> 
    <div class="card"> 
     <img class="card-img-top" src="http://placehold.it/500x300" alt="Card image cap"> 
    </div> 
    <div class="card"> 
     <img class="card-img-top" src="http://placehold.it/500x700" alt="Card image cap"> 
    </div> 
    </div> 
</div> 

せて頂き： は

が、私は赤い円の中にそのスペースが離れて行くことができ、それは、私が

が

HTMLそれらを一緒に接続できるので、それをしたいと思いますブーストラップ3を使用している場合、または何か愚かなことをしている場合は私はこのアイデアを使用してギャラリーを構築したいと思いますが、私はそれらの大きなスペースを取り除くことができます

ありがとう

Answer 1

複数の行を使用しようとしているため、そのギャップを避けることができません。あなたがしなければならないのは、ページ全体に1つの行だけがありますが、複数の列があります。その後、ギャップはありません。擬似コードは次のとおりです。

<div class=row> 
    <div class="col-sm-2"> 

     images 
    </div> 
    <div class="col-sm-2"> 

     images 
    </div> 
    <div class="col-sm-2"> 

     images 
    </div> 
    <div class="col-sm-2"> 

     images 
    </div> 
    <div class="col-sm-2"> 

     images 
    </div> 
<div>