首页 > 解决方案 > 动态设置列数

问题描述

我正在尝试以下操作:

我需要创建一个表来存储信息。

我遇到的问题是我需要根据数组长度设置列数:2 列始终相同(第一列和最后一列),并且它们之间的列数是可变的。

为了计算每列的长度,我使用了以下规则(我正在测试,第一列和最后一列取 12 之间除法的余数):

$numberOfColumns = sizeof($hbwellMarginsDataFillers[0]['payMethods'])+2;
$remainder = 12%$numberOfColumns;
$quotient = intdiv(12/$numberOfColumns, 1);

$widthReferralCodeColumn = '';
$widthActionsColumn = '';
$payMethodsColumnsWidth = $quotient;

if($remainder > 0){
    //if remainder is pair
    if($remainder%2 === 0){
        $widthReferralCodeColumn = $quotient + ($remainder/2);
        $widthActionsColumn      = $quotient + ($remainder/2);
    }else{
        $widthReferralCodeColumn = intdiv($remainder/2);
        $widthActionsColumn = $widthReferralCodeColumn + $remainder%2;
    }
}

然后创建标题:

<div class="row box-table">
        <div class="col-sm-12">
            <div class="panel-heading bold panel-title">
                <div class="col-xs-<?= $widthReferralCodeColumn ?> text-center">
                    <span>Código de Referrido</span>
                </div>
                <?php foreach ($hbwellMarginsDataFillers[0]['payMethods'] as $key => $value): ?>
                <div class="col-xs-<?= $payMethodsColumnsWidth ?> text-center">
                    <span><?= $key ?></span>
                </div>
                <?php endforeach ?>
                <div class="col-xs-<?php $widthActionsColumn ?> text-center">
                    <span>Acciones</span>
                </div>

            </div>
        </div>
    </div>

由于列名,结果是列在其他列之上。

当我尝试使用时,我已经正确分配了它,但是我需要按照下面的代码所示进行操作……有没有办法动态设置列宽?

标签: phphtmlhtml-tablebootstrap-4

解决方案


使用这个检查:

            <?php
            //Columns must be a factor of 12 (1,2,3,4,6,12)
            $numOfCols = 4;
            $rowCount = 0;
            $bootstrapColWidth = 12 / $numOfCols;
            ?>
            <div class="row">
            <?php
            foreach ($rows as $row){
            ?>  
                    <div class="col-md-<?php echo $bootstrapColWidth; ?>">
                        <div class="thumbnail">
                            <img src="user_file/<?php echo $row->foto; ?>">
                        </div>
                    </div>
            <?php
                $rowCount++;
                if($rowCount % $numOfCols == 0) echo '</div><div class="row">';
            }
            ?>
            </div>

推荐阅读