引导网格和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>

这给了我这个：

在此处输入图片说明

而不是这样（显然在许多“ Hello world”中）：

在此处输入图片说明

任何帮助，不胜感激！

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命令。 使用准备好的语句和参数化查询。 有关更多信息，请单击“ 防止SQL注入”