无法连续对齐水平滑块答案

【问题标题】：Not able to align horizontal slider in a row无法连续对齐水平滑块
【发布时间】：2017-08-28 07:48:51
【问题描述】：

我有一个工作正常的水平旋转木马，here is the code for it 现在我希望从数据库中获取数据并显示它。以下是我使用的代码

<div class='row'>
    <div class='col-xs-12'>
        <div class="carousel slide media-carousel" id="media">
            <div class="carousel-inner">
                <div class="item  active">
                    <div class="row">
                        <?php foreach($student as $student): ?>
                            <div class="col-md-3">
                                <a class="thumbnail" href="#"><?php echo $student->fullname;?></a>
                            </div>          
                        <?php endforeach; ?>           
                    </div>
                </div>
            </div>
            <a data-slide="prev" href="#media" class="left carousel-control">‹</a>
            <a data-slide="next" href="#media" class="right carousel-control">›</a>
        </div>                          
    </div>
</div>

但是视图被扭曲了，而不是所有幻灯片都在一行中滑动，视图是这样的

【问题讨论】：

为什么这被标记为 php？它似乎不是与 php 相关的问题。
为什么这被标记为mysql？
@Fred -ii- 我标记它是因为我想我可能没有正确应用循环
如果是 php/mysql 相关问题；你认为你可能有语法错误吗？您是否通过错误报告和查询检查它们？
@Fred -ii- 是的，但找不到任何东西

标签： php jquery css twitter-bootstrap carousel

【解决方案1】：

由于你没有给出php代码，我给你它的样本

您得到的数组将其分成一组 4 个（或任意多个），如下所示

$query = $this->db->get('student');
$r = $query->result();
$s = (array_chunk($r, 4));
return $s;

然后根据你给的代码，改成下面的

<div class="carousel-inner">
    <?php foreach($s as  $key => $per_student): ?>
        <?php if($key=='0'): ?>
            <div class="item active">
        <?php else: ?>
            <div class="item ">
        <?php endif; ?>
                <div class="row">
                    <?php foreach($per_student as $student): ?>
                        <div class="col-md-3">
                            <a class="thumbnail" href="#"><?php echo $student->fullname;?></a>
                        </div>
                    <?php endforeach; ?>
                </div>
            </div>
    <?php endforeach; ?>
</div>

【讨论】：

谢谢，完美答案

【解决方案2】：

在循环内创建 class="row"。另请记住，屏幕仅包含 12 个单位，因此如果您创建的一行超过 12 个单位，它将自动转到下一行。由于您已经创建了创建“col-md-3”超过 4 次且总和超过 12 的循环，因此它移动到下一行。供参考查看this

【讨论】：

在循环内创建一行将简单地创建一个垂直行，其中数据将在另一个下方，虽然单位是 12，我已将其分为 4 个部分，但这仅适用于一个屏幕上，我的滑块可以有任意数量的框，因为它们将从数据库中填充，但一次只有 4 个可见

【解决方案3】：

这是因为除非该行处于活动状态，否则另一个 .item 行将获得属性 display:none; 如果您要删除 display:none;它应该可以按您的意愿工作。

【讨论】：

通过删除 display:none;结果还是一样