小盒子出容器线

Question

enter image description here

我正在尝试制作仪表板在板上放置小盒子时新行中的框超出页面边界第一行的框显示正确，但是当它们向下移动到第二和第三行时，问题就开始了，依此类推..... 请问我该如何解决这个问题？`

    <!-- Small boxes (Stat box) -->
    <div class="row">
        <div class="col-lg-3 col-xs-6">
            <!-- small box -->
            <div class="small-box bg-hc">
                <div class="inner text-hc">
                    <?php
                    $stmt = $conn->prepare("SELECT * FROM ticket_prices ");
                    $stmt->execute();

                    $total = 0;
                    foreach ($stmt as $srow) {
                        $subtotal = $srow['TicketPrice'];
                        $total += $subtotal;
                    }

                    echo "<h3>" . $total, 2 . " AED</h3>";
                    ?>
                    <p>Total Sales from products</p>
                </div>
                <div class="icon">
                    <i class="fa fa-shopping-cart"></i>
                </div>
                <a href="../booking/index.php" class="small-box-footer">More info <i
                        class="fa fa-arrow-circle-right"></i></a>
            </div>
        </div>
        <!-- ./col -->
        <!-- Small boxes (Stat box) -->
        <div class="row">
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-hc">
                    <div class="inner text-hc">
                        <?php
                        $stmt = $conn->prepare("SELECT * FROM ticket_prices ");
                        $stmt->execute();

                        $total = 0;
                        foreach ($stmt as $srow) {
                            $subtotal = $srow['TicketPrice'];
                            $total += $subtotal;
                        }

                        echo "<h3>" . $total, 2 . " AED</h3>";
                        ?>
                        <p>Total Sales from products</p>
                    </div>
                    <div class="icon">
                        <i class="fa fa-shopping-cart"></i>
                    </div>
                    <a href="../booking/index.php" class="small-box-footer">More info <i
                            class="fa fa-arrow-circle-right"></i></a>
                </div>
            </div>
            <!-- ./col -->
            <!-- Small boxes (Stat box) -->
            <div class="row">
                <div class="col-lg-3 col-xs-6">
                    <!-- small box -->
                    <div class="small-box bg-hc">
                        <div class="inner text-hc">
                            <?php
                            $stmt = $conn->prepare("SELECT * FROM ticket_prices ");
                            $stmt->execute();

                            $total = 0;
                            foreach ($stmt as $srow) {
                                $subtotal = $srow['TicketPrice'];
                                $total += $subtotal;
                            }

                            echo "<h3>" . $total, 2 . " AED</h3>";
                            ?>
                            <p>Total Sales from products</p>
                        </div>
                        <div class="icon">
                            <i class="fa fa-shopping-cart"></i>
                        </div>
                        <a href="../booking/index.php" class="small-box-footer">More info <i
                                class="fa fa-arrow-circle-right"></i></a>
                    </div>
                </div>
                <!-- ./col -->
                <!-- Small boxes (Stat box) -->
                <div class="row">
                    <div class="col-lg-3 col-xs-6">
                        <!-- small box -->
                        <div class="small-box bg-hc">
                            <div class="inner text-hc">
                                <?php
                                $stmt = $conn->prepare("SELECT * FROM ticket_prices ");
                                $stmt->execute();

                                $total = 0;
                                foreach ($stmt as $srow) {
                                    $subtotal = $srow['TicketPrice'];
                                    $total += $subtotal;
                                }

                                echo "<h3>" . $total, 2 . " AED</h3>";
                                ?>
                                <p>Total Sales from products</p>
                            </div>
                            <div class="icon">
                                <i class="fa fa-shopping-cart"></i>
                            </div>
                            <a href="../booking/index.php" class="small-box-footer">More info <i
                                    class="fa fa-arrow-circle-right"></i></a>
                        </div>
                    </div>
                    <!-- ./col -->
                    <!-- Small boxes (Stat box) -->
                    <div class="row">
                        <div class="col-lg-3 col-xs-6">
                            <!-- small box -->
                            <div class="small-box bg-hc">
                                <div class="inner text-hc">
                                    <?php
                                    $stmt = $conn->prepare("SELECT * FROM ticket_prices ");
                                    $stmt->execute();

                                    $total = 0;
                                    foreach ($stmt as $srow) {
                                        $subtotal = $srow['TicketPrice'];
                                        $total += $subtotal;
                                    }

                                    echo "<h3>" . $total, 2 . " AED</h3>";
                                    ?>
                                    <p>Total Sales from products</p>
                                </div>
                                <div class="icon">
                                    <i class="fa fa-shopping-cart"></i>
                                </div>
                                <a href="../booking/index.php" class="small-box-footer">More info <i
                                        class="fa fa-arrow-circle-right"></i></a>
                            </div>
                        </div>
                        <!-- ./col -->
</section>`

Answer 1

您的 HTML 结构有误。你可以在 sublime 或 vs code 或任何 html 编辑器中清楚地看到它。假设您要循环 'Box' 或 'Row of 4 Boxes'，我有 re-structured HTML 而没有“PHP”代码。

循环选项 1： 寻找 ，您可以从这里循环框。

循环选项 2 : 寻找，你可以从这里循环4个框的行。

<section>
    <div class="container">
        <!-- Lopping option 2 -->
        <div class="row">

            <!-- Lopping option 1 -->
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-hc">
                    <div class="inner text-hc">
                        <h3></h3>
                        <p>Total Sales from products</p>
                    </div>
                    <div class="icon">
                        <i class="fa fa-shopping-cart"></i>
                    </div>
                    <a href="../booking/index.php" class="small-box-footer">More info <i
                            class="fa fa-arrow-circle-right"></i></a>
                </div>
            </div>
            <!-- Lopping option 1 -->

            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-hc">
                    <div class="inner text-hc">
                        <h3></h3>
                        <p>Total Sales from products</p>
                    </div>
                    <div class="icon">
                        <i class="fa fa-shopping-cart"></i>
                    </div>
                    <a href="../booking/index.php" class="small-box-footer">More info <i
                            class="fa fa-arrow-circle-right"></i></a>
                </div>
            </div>
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-hc">
                    <div class="inner text-hc">
                        <h3></h3>
                        <p>Total Sales from products</p>
                    </div>
                    <div class="icon">
                        <i class="fa fa-shopping-cart"></i>
                    </div>
                    <a href="../booking/index.php" class="small-box-footer">More info <i
                            class="fa fa-arrow-circle-right"></i></a>
                </div>
            </div>
            <div class="col-lg-3 col-xs-6">
                <!-- small box -->
                <div class="small-box bg-hc">
                    <div class="inner text-hc">
                        <h3></h3>
                        <p>Total Sales from products</p>
                    </div>
                    <div class="icon">
                        <i class="fa fa-shopping-cart"></i>
                    </div>
                    <a href="../booking/index.php" class="small-box-footer">More info <i
                            class="fa fa-arrow-circle-right"></i></a>
                </div>
            </div>
        </div>
        <!-- Lopping option 2 -->
    </div>
</section>

小盒子出容器线

small boxes go out line of container

html

css

php

bootstrap-4