基于断点的引导行元素答案

【问题标题】：Bootstrap row element based on breakpoint基于断点的引导行元素
【发布时间】：2017-09-01 12:24:52
【问题描述】：

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

对此有什么想法或例子吗？谷歌这么难的事情，我没有想法。谢谢！

【问题讨论】：

我认为你需要使用媒体断点和自定义列断点看这里stackoverflow.com/questions/24066059/…。

标签： php html css twitter-bootstrap twitter-bootstrap-3

【解决方案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”响应式重置，或使列的高度相同。否则，您将拥有the height problem。

【讨论】：