基于断点的自举行元素

我正在使用引导程序并循环一个div - 但由于bootstrap需要父行与'行'类，我需要根据其中的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格打印一次，每隔2格打印一次，每隔1格打印一次。对谷歌来说这是一件很难的事情，而且我没有想法。谢谢！

来源

2017-04-06 dilby

我认为你需要使用媒体断点和定制列断点看这里http://stackoverflow.com/questions/24066059/bootstrap-3-adding-a-new-set-of-columns。 – Ace

您无需每隔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。

但是，如果每列的内容高度不同，则需要使用“clearfix”响应性重置每个X列，使列高度相同。否则，你将有the height problem。

来源

2017-04-06 12:53:35 ZimSystem

基于断点的自举行元素

回答

相关问题