Question

<div class="container">
        <h1 class="text-center">Add To Cart In PHP</h1>
        <div class="row">
                <?php 
                $sql="select * from products";
                $res=$con->query($sql);
                if($res->num_rows>0)
                {
                    while($row=$res->fetch_assoc())
                    {
                        echo '
                        <div class="col-sm-6 col-lg-4 col-xl-3 col-md-6 text-center">
                            <div class="card mb-4">
                                <a href="view.php?id='. $row['PID'] .'">
                                    <img class="card-img-top" src="assets/images/'. $row['PIC'] .'" alt=""> 
                                </a>
                                <div class="card-body">                     
                                    <a href="view.php?id='. $row['PID'] .'">
                                        <h5 class="card-title">'. $row['PNAME'] .'</h5>
                                    </a>
                                </div>
                            </div>
                        </div>
                        ';
                    }
                }
                ?>
        </div>
    </div>

image

如果您仔细观察上图，可以看到图像卡左侧的白色缝隙。您如何清除？是否有任何CSS或引导程序代码可以消除空白？

Answer 1

请尝试下面的代码，它应该可以解决问题：

<div class="col-xs-12 col-md-2 col-md-offset-3"><img src="assets/images/'. $row['PIC'] 
.'" alt=""></div>
<div class="col-xs-12 col-md-2"><img src="assets/images/'. $row['PIC'] .'" alt="""> 
</div>
<div class="col-xs-12 col-md-2"><img src="assets/images/'. $row['PIC'] .'" alt=""> 
</div>

如何消除图像周围的白色间隙（引导卡）

1 个答案: