ブーツポイントに基づくブートストラップ行要素

Question

私はブートストラップを使用してdivをループしていますが、ブートストラップには 'row'クラスの親divが必要なので、その中のdiv数に基づいて行を出力する必要があります。唯一の問題は、私が見つけることができる例はすべて設定された数であり、私はブレークポイントに基づいてそれを行う必要があるということです。例えば、私のコードは次のとおりです。

<div class="row"> 
 

 
    <?php foreach($projects as $project): ?> 
 

 
    <div class="col-lg-4 col-md-6 col-sm-12 project_box"> 
 
     <a href="<?= $project->url() ?>" class="project_name"><?= $project->title()->html() ?></a> 
 
      <?php if($image = $project->images()->sortBy('sort', 'asc')->first()): $thumb = $image->crop(600, 600); ?> 
 
      <a href="<?= $project->url() ?>"><img src="<?= $thumb->url() ?>" alt="Thumbnail for <?= $project->title()->html() ?>" class="responsive" /></a> 
 
      <?php endif ?> 
 
      <p class="summary"> 
 
      <?php echo excerpt($project->problem(), 200) ?> 
 
      </p> 
 
     </a> 
 
     <a href="<?= $project->url() ?>" class="btn project">Read More</a> 
 
    </div> 
 

 
    <?php endforeach ?> 
 

 
</div>

あなたが見ることができるように、ラップする必要が問題になっている子div要素がCOL-LG-4 COL-MD-6 COL-SM」です-12 'という意味です。大きなデバイスでは、行の親は3 div毎に、媒体は2に、小と小は1毎に印刷する必要があります。

これに関するアイデアや例はありますか？ Googleにこのような難しいことと私はアイデアがありません。ありがとう！

Answer 1

Xコラムごとにrowを「印刷」する必要はありません。すべての列を単一の.rowに入れます。

<div class="row"> 
    <div class="col-lg-4 col-md-6 col-sm-12 project_box">..</div> 
    <div class="col-lg-4 col-md-6 col-sm-12 project_box">..</div> 
    <div class="col-lg-4 col-md-6 col-sm-12 project_box">..</div> 
    <div class="col-lg-4 col-md-6 col-sm-12 project_box">..</div> 
    <div class="col-lg-4 col-md-6 col-sm-12 project_box">..</div> 
    ... 
</div> 

これはcolumn wrappingとして知られています。

ただし、各列の内容の高さが異なる場合は、X列ごとに「clearfix」応答をリセットする必要があります。OR列の高さを同じにします。そうしないとthe height problemになります。