Question

我正在使用bootstrap并循环div - 但由于bootstrap需要带有'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和小1。

这有什么想法或例子吗？谷歌这么难，我想出来了。谢谢！

Answer 1

你不需要打印＆＃34;每个X列的row。将所有cols放在一个.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。

但是，如果每个col的内容高度不同，则需要使用＆＃34; clearfix＆＃34;响应式重置每个X列， OR 使列的高度相同。否则，您将拥有the height problem。

基于断点的Bootstrap行元素

1 个答案: