在此處輸入影像描述
我正在嘗試制作儀表板在板上放置小框時新行中的框超出了頁面的范圍第一行中的框顯示正確，但是當它們下降到第二行時問題就開始了和第三排，依此類推......請問我該如何解決這個問題？
<!-- 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>`
uj5u.com熱心網友回復：
您的 HTML 結構錯誤。您可以在 sublime 或 vs code 或任何 html 編輯器中清楚地看到它。假設您要回圈“盒子”或“4 個盒子的行”，我已經重新構造了沒有“PHP”代碼的 HTML。
回圈選項 1：
查找<!-- Looping Option 1 -->，您可以從此處回圈這些框。
回圈選項 2：
查找<!-- Looping Option 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/453201.html