<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="col text-center mt-5 bg-dark text-white p-2 m-3"> แสดงสินค้า </div> </div> </div> <div class="container"> <div class="row"> <?php for ($i = 0; $i < 12; $i++) { ?> <div class="col col-md-4 col-lg-3 -webkit-box-flex: 0;"> <div class="card mb-4"> <img class="card-img-top" src="https://images.unsplash.com/photo-1481070414801-51fd732d7184?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=82203e4d57fc0d3bdd8ffc0f66d09763&auto=format&fit=crop&w=&w=1280&h=720" alt="Card image cap"> <div class="card-body"> <h5 class="card-title">Card title <?php echo $i+1 ?></h5> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <a target="_blank" href="http://localhost/bootstrap4/ep7/5-article-detail.html" class="btn btn-primary">Go somewhere</a> </div> </div> </div> <?php } ?> </div> </div> <script src="node_modules/jquery/dist/jquery.min.js"></script> <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script> <script src="node_modules/popper.js/dist/umd/popper.min.js"></script> </body> </html>
-webkit-box-flex
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง