Bootstrap-Zeilenelement basierend auf Breakpoint

Question

Ich benutze Bootstrap und Looping ein Div - aber da Bootstrap erfordert ein Elternteil div mit der 'row' Klasse, muss ich eine Zeile basierend auf der Anzahl der divs innerhalb dieser drucken. Das einzige Problem ist, dass die Beispiele, die ich finden kann, alle eine festgelegte Zahl sind, und ich muss es basierend auf dem Haltepunkt machen. Zum Beispiel ist mein Code:

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

Wie Sie das Kind div in Frage sehen kann, das heißt ‚col-lg-4 col-md-6 col-sm gewickelt werden muss -12 'bedeutet, dass auf großen Geräten die Zeile Eltern alle 3 Divs gedruckt werden sollte, auf Medium alle 2 und auf klein und extra klein alle 1.

Gibt es irgendwelche Ideen oder Beispiele zu diesem Thema? So eine harte Sache zu googeln und ich habe keine Ideen mehr. Vielen Dank!

Answer 1

Sie müssen die row keine X-Spalten "drucken". Setzen Sie alle Spalten in eine einzige .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> 

Dies ist bekannt als column wrapping.

Wenn jedoch der Inhalt der einzelnen Spalten in der Höhe variiert, müssen Sie "clearfix" reaktionsfähig verwenden, setzt alle X-Spalten zurück, ODER, um die Spalten auf die gleiche Höhe zu bringen. Andernfalls haben Sie the height problem.