ブートストラップを使用して列をずらすことは可能ですか？

Question

私は、長さの異なる内容のブートストラップを使用してcol-sm-6ボックスになるように以下のコードを書いてきました。この問題を解決する方法はありますか？

それがことになってどのように：それは

ある方法：

Answer 1

ができませ2列定義した場合、「偽」というレイアウト - 左側に1、右側に1つずつ、それらの列にあなたの記事を入れてください。

しかし、より良い方法は、masonryのようなプラグインを使用することです。石積みはこのようなレイアウトに最適です。

p { 
 
    background: #eee; 
 
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 
    <div class="row"> 
 
     <div class="col-lg-6"> 
 
     <p>asdf</p> 
 
     <p>asdf</p> 
 
     <p>asdf</p> 
 
     <p>asdf<br><br>asdf<br>asdf</p> 
 
     <p>asdf<br><br>asdf<br>asdf</p> 
 
     <p>asdf</p> 
 
     <p>asdf</p> 
 
     <p>asdf</p> 
 
    </div> 
 
     <div class="col-lg-6"> 
 
     <p>asdf<br><br>asdf<br>asdf</p> 
 
     <p>asdf</p> 
 
     <p>asdf</p> 
 
     <p>asdf<br><br>asdf<br>asdf</p> 
 
     <p>asdf</p> 
 
     <p>asdf</p> 
 
     <p>asdf<br><br>asdf<br>asdf</p> 
 
    </div> 
 
</div> 
 
</div>

Answer 2

あなたはCSSの列を使用することができ、フレキシボックスを使用しない場合：あなたの特定のケースで

.container { column-count: 2; } 
 
p    { border: 1px solid gray; background-color: lightgray; } 
 
p:first-child { margin-top: 0; }

<div class="container"> 
 
    <p>asdf</p> 
 
    <p>asdf</p> 
 
    <p>asdf</p> 
 
    <p>asdf<br><br>asdf<br>asdf</p> 
 
    <p>asdf<br><br>asdf<br>asdf</p> 
 
    <p>asdf</p> 
 
    <p>asdf</p> 
 
    <p>asdf</p> 
 
    <p>asdf<br><br>asdf<br>asdf</p> 
 
    <p>asdf</p> 
 
    <p>asdf</p> 
 
    <p>asdf<br><br>asdf<br>asdf</p> 
 
    <p>asdf</p> 
 
    <p>asdf</p> 
 
    <p>asdf<br><br>asdf<br>asdf</p> 
 
</div>

を、カラムが実際に可能性があります列が自動的にバランスを取るので、フレックスボックスより優れています。

Answer 3

使用

<div class="clearfix"></div> 

第二と第四のdiv後。より多くのdivがある場合は、6番目のdivの後にこのクラスを使用します。