带有php的引导网格[重复]

Question

我正在为我的 Omeka 网站制作一个主题，我在其中使用 PHP 调用一个项目及其各种组件。每个项目都在自己的 div 中，我尝试使用 Bootstrap 创建一个类似平铺的网格。但是，这些 div 仅在一个垂直列中排列。如何让所有的 div 排成一排三四个？我完全被难住了。如果没有 PHP（多行和手动添加的内容），它可以正常工作，但否则将无法正常工作。 This is what it looks like right now。这就是我希望 div 的样子：

这里是html/php：

  <?php foreach (loop('items') as $item): ?>
                <div class="container">
                    <div class="item">
                        <div class="row">
                            <!-- attempt at square grid -->
                             <div class="col-md-3 col-sm-4 col-xs-6 item-item">
                                 <div class="dummy"></div>
                                     <div class="thumbnail purple">
                                 Image:  <?php $image = $item->Files; ?>
                                <?php if ($image) {
                                        echo link_to_item('<div style="background-image: url(' . file_display_url($image[0], 'original') . ');" class="img"></div>');
                                    } else {
                                        echo link_to_item('<div style="background-image: url(' . img('defaultImage@2x.jpg') . ');" class="img"></div>');
                                    }
                                ?>
                                   Title: <?php echo link_to_item(metadata('item', array('Dublin Core', 'Title')), array('class'=>'permalink')); ?><br>
                                    Creator: <?php echo metadata('item', array('Dublin Core', 'Creator')); ?><br>
                                    Subject: <?php echo metadata('item', array('Dublin Core', 'Subject')); ?><br>
                                    Description: <?php echo metadata('item', array('Dublin Core', 'Description'), array('snippet'=>150)); ?><br>
                                    <br>
                                </div>
                           </div>
                       </div>
                   </div><!-- end grid --> 

还有 CSS：

.dummy {
    margin-top: 100%;
}
.thumbnail {
    position: absolute;
    top: 15px;
    bottom: 0;
    left: 15px;
    right: 0;
    text-align:center;
    padding-top:calc(50% - 30px);
}

.item-item { 
    border: solid black 5px;
}

Answer 1

我会给你一个伪方法来实现这一点，利用array_chunk()。

$chunks = array_chunk($array, 4);
foreach($chunks as $group): ?>
    <div class="row">
        <?php foreach($group as $element): ?>
            <div class="col-md-3 col-sm-4 col-xs-6 item-item">
                <?php // do your php stuff...?>
            </div>
        <?php endforeach; ?>
    </div>
<?php endforeach; ?>

Example