php - 基于断点的 Bootstrap 行元素

Question

我正在使用 bootstrap 并循环一个 div - 但是因为 bootstrap 需要一个带有“行”类的父 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 号。

有什么想法或例子吗？谷歌这么难，我没主意了。谢谢!

Answer 1

您不需要每隔 X 列“打印”行。将所有列放在一个 .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。

但是，如果每列的内容高度不同，您将需要使用“clearfix”响应式重置每 X 列，或使列的高度相同。否则你会得到 the height problem 。