web-dev-qa-db-ja.com

bootstrap 3グリッドシステムとcssで石積み効果を作成する方法

私の問題は、bootstrap 3グリッドシステムを使用してブロック形式でデータを表示したいが、上記の行に制約されている高さから生じる迷惑な空白のギャップが必要ないことです。 、 私が行った場合：

<div class="row">
    <div class="col-lg-4">post</div>
    <div class="col-lg-4">longer post that is going to take more height than the others</div>
    <div class="col-lg-4">post</div>
</div>
<div class="row">
    <div class="col-lg-4">post</div>
    <div class="col-lg-4">post</div>
    <div class="col-lg-4">post</div>
</div>

その後、2行の間に空白が残ります。達成しようとしているのは、CSSのみを使用した石積み効果です（ポストフィルがその上のポストの近くに座っている）、特にbootstrap = 3グリッドシステムIE：

enter image description here

私はこれが plugins でできることを知っていますが、もっと純粋な（ハックする必要があるとしても）ソリューションがあるかどうかを見たいです。何か案は？

csstwitter-bootstrapmasonry
9
Typhomism

これをサイトで行い、グリッドを縦列に配置しました。

例：

<div class="row">
  <div class="col-lg-4">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="col-lg-4">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
  <div class="col-lg-4">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </div>
<div>
17
Aibrean

Bootstapで.row要素は、それが含むdiv-blocks/colのフロートをクリアするために使用されます（例：col-lg-4）;

そのため、異なる行の要素を並べて配置することは基本的に不可能です。必然的にマークアップを変更する必要があります。

一方、bootstrap=レスポンシブカラムシステムを使用すると、CSS-Masonry効果を作成するのに役立ちます。
1行内に石積み効果を加えたいすべての「列項目」を配置して、インラインブロックとして表示することができます（その他の小さな調整も可能です..）トリックを行う必要があります（これは、CSSだけにこだわっている場合に進むべき方法です。）;

結論として、Masonryが生まれ、JavaScriptグリッドレイアウトライブラリのままであるため、CSSで動作させることができたとしても、JSを使用することをお勧めします。

この素晴らしいアイデアに対して、Desandroに感謝します。

6
maioman

Bootstrap 4では、.card-columns、こちらをご覧ください： https://v4-alpha.getbootstrap.com/components/card/

JSはCSSよりも制御性と互換性が優れているため、 isotope を使用することをお勧めします。

4
Max

次のようなcssで、DBから画像を受け取る単純な石積みグリッドを作成しました。

    <div class="container">
    <div class="col-lg-12 col-sm-12 col-md-12 col-xs-12"> 
    <a href="<?php echo $src; ?>" class="fancybox" data-fancybox="group" id="<?php echo $count; ?>" rel="<?php the_ID(); ?>">
    <div class="image-gallerie">                                                        
    <img src="<?php echo $src; ?>" class="img-gallerie lazy" alt="Gallery image" id="<?php echo $count; ?>" />                                              

    </div> 
    </a>  
    </div>
    </div>

    .container {
    -moz-column-width: 35em;
    -webkit-column-width: 35em;
    -moz-column-gap: 1em;
    -webkit-column-gap:1em;  
    }

    .image-gallerie {
     width:  100%; 
     }
    .image-gallerie img{
     width: 100%;
     height: 100%;
     margin-top: 15px;
      margin-bottom: 10px;
    }
1
Ouahib Abdallah