引导网格和mysql响应的问题

Question

I have an issue with bootstrap and creating a 4 column responsive grid from a mysql response. The problem is that if the second mysql query has a variable number of results, it brakes the grid.

Here is my code (where the first query has 9 results and the second query has a variable number of results):

<?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>

which gives me this:

enter image description here

instead of this (obviously with many 'Hello world'):

enter image description here

Any help greatly appreciated!

Answer 1

Bootstrap doesn't claim to do any kind of elegant bin-packing on panels with different sizes. You could do some programming or css work to make all your panels the same size.

If that doesn't work for your application, you're going to need a layout library that does bin-packing so these panels of different sizes align properly.

There are a few such libraries available as jQuery plugins.