bootstrap 网格和 mysql 响应问题

Question

我对 bootstrap 和从 mysql 响应创建 4 列响应网格有疑问。问题是，如果第二个 mysql 查询的结果数量可变，它会破坏网格。

这是我的代码（第一个查询有 9 个结果，第二个查询有可变数量的结果）：

<?php
$a = "SELECT * FROM $table_users ORDER BY username";
$result = mysql_query($a);
?>
<div class="container">
    <div class="row">
        <?php while ($row = mysql_fetch_array($result)) {?>
        <div class="col-xs-3" style="background-color:aqua;">
            <?php echo $row['username'];
            $b = "SELECT * FROM $table_presents WHERE bought_for='$row[username]' OR bought_for='' ORDER BY id";
            $result_presents = mysql_query($b) or die(mysql_error());
            while ($row_presents = mysql_fetch_array($result_presents)) {
            ?>
            <div style="background-color:red;">
                Hello world!
            </div>
            <?php }?>
        </div>
        <?php }?>
    </div>
</div>

这给了我这个：

enter image description here

而不是这个（显然有很多'Hello world'）：

enter image description here

非常感谢任何帮助！

Answer 1

Bootstrap 并未声称对不同尺寸的面板进行任何优雅的装箱。您可以进行一些编程或 css 工作以使所有面板大小相同。

如果这对您的应用程序不起作用，您将需要一个进行装箱的布局库，以便这些不同尺寸的面板正确对齐。

有一些这样的库可用作 jQuery 插件。

Answer 2

这里，$row[username]是错误的，应该是$row['username']。

$b = "SELECT * FROM $table_presents WHERE bought_for='$row[username]' OR bought_for='' ORDER BY id";

顺便说一句，我更改了您的代码位。请试试这个。

<?php
$a = "SELECT * FROM $table_users ORDER BY username";
$result = mysql_query($a);
?>
<div class="container">
    <div class="row">
        <?php while ($row = mysql_fetch_array($result)) 
        {
        $username=$row['username'];
        ?>
        <div class="col-xs-3" style="background-color:aqua;">
            <?php echo $username;
            $b = "SELECT * FROM $table_presents WHERE bought_for='$username' OR bought_for='' ORDER BY id";
            $result_presents = mysql_query($b) or die(mysql_error());
            while ($row_presents = mysql_fetch_array($result_presents)) {
            ?>
            <div style="background-color:red;">
                Hello world!
            </div>
            <?php }?>
        </div>
        <?php }?>
    </div>
</div>

[注意：用户可以注入您的 SQL 命令。使用准备好的语句和参数化查询。有关详细信息，请单击 Prevent SQL Injections

bootstrap 网格和 mysql 响应问题

Issue with bootstrap grid and mysql response

php

mysql

grid

row

twitter-bootstrap