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

Posted 2023-03-06

【中文标题】带有php的引导网格[重复]

【英文标题】：Bootstrap grid with php [duplicate]

【发布时间】：2016-04-27 02:05:07

【问题描述】：

我正在为我的 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('[e-mail]') . ');" 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;

【问题讨论】：

你能为我们添加小提琴吗？ jsfiddle.net

嗨@Mystika---当然。这是：https://jsfiddle.net/hcgriggs/qx9smztm/。不过，我不确定我是否正确添加了它。如果我需要上传更多代码，请告诉我。

【参考方案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

【讨论】：

谢谢，达伦！所以，我已经尝试过了，但它隐藏了所有的 div ——即，当我刷新时，只有页眉和页脚内容可见。你知道我做错了什么吗？

您需要根据需要包含其他类，因此将.item/etc 放入col-md-3... div 中。

嗯....仍然无法正常工作。如果有帮助，我在这里添加了一个小提琴---https://jsfiddle.net/hcgriggs/qx9smztm/