Question

我正在使用Bootstrap创建一行6个colunm图像。

<div class="row">
    <?php
    $sql = //my query
    while($row = mysqli_fetch_array($sql)){
    ?>
    <div class="col-xs-6 col-md-2">
       <img id="img" class="img-responsive" src="img/<?php echo $row['image']; ?>" />
    </div>
    <?php
    }
    ?>
</div>

当数据库中只有6行时，它可以正常工作，但是当有7行时，额外的一行会碰到最右边而不是下一行的最左边，请参阅下面的示例。

| img | img | img | img | img | img
                              | img

我正在寻找的正常结果将是

| img | img | img | img | img | img
| img

我想在每6个结果后创建一个新的bootstrap行，任何帮助都会被评估

Answer 1

您可以先将所有值提取到数组中，计算数组中有多少元素，然后动态控制您使用的span类。

<div class="row">
<?php
$sql = //my query
$images = array();
while($row = mysqli_fetch_assoc($sql)){
    $images[] = $row['image'];
}
$column_class = count($images) > 6 ?  "col-xs-3 col-md-1" : "col-xs-6 col-md-2";

foreach ($images as $image) {
?>
<div class="<?= $column_class ?>">
   <img id="img" class="img-responsive" src="img/<?= $image ?>" />
</div>
<?php
}
?>

Answer 2

我之前看到过这种情况，当时图像的高度不相同。左边的浮子只浮动到底线不平的点。尝试添加合理固定高度的样式高度。

<div class="row">
    <?php
    $sql = //my query
    while($row = mysqli_fetch_array($sql)){
    ?>
    <div class="col-xs-6 col-md-2">
       <img id="img" class="img-responsive" style="height:100px" src="img/<?php echo $row['image']; ?>" />
    </div>
    <?php
    }
    ?>
</div>

Answer 3

我在最近的一个项目中遇到了这个问题，并且能够使用此代码解决它。我只有两个视图，所以我只需要两行，但如果你想要你可以拥有更多。您可以在此page

上查看此操作

<div class="visible-md-block visible-lg-block clearfix">

<div class="visible-sm-block visible-xs-block clearfix">

以下是图库页面的完整php代码

<?php
    $c = 1;
    foreach($images as $image) {?>
     <div class="col-xs-4 col-md-3">
       <a class="thumbnail" href="path to full size image" data-toggle="lightbox" data-footer="<?php echo $image['caption']; ?>">
        <img class="img-responsive" src="path to thumbnail" alt="...">
      </a>
     </div>
<?php
        if(($c % 4) == 0) {
            echo '<div class="visible-md-block visible-lg-block clearfix"></div>';
        }

        if(($c % 3) == 0) {
            echo '<div class="visible-sm-block visible-xs-block clearfix"></div>';
        }

        $c++;
    }
?>

很抱歉，虽然此代码适用于您希望连续图像数量在不同屏幕尺寸下更改的情况，但我只是重新阅读您的问题并且您说您只需要6个，所以您可以只使用一行< / p>

if(($c % 6) == 0) {
            echo '<div class="clearfix"></div>';
        }

$ c变量只是一个计数器，代码$ c％6 == 0将在每次$ c可被6整除时放置clearfix div。

根据mysql查询计数引导多行

3 个答案: