bootstrap : 解决使图片全屏显示有空白边距的问题

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Document</title>

    <link rel="stylesheet" href="./css/bootstrap.min.css">

    <style>

        .main{

            width: 100%;

        }

        .box-wrap div{

            border: 1px solid #000;

        }

        /*  解决使图片全屏显示有空白边距的问题

        

           1，col 设置内边距为0

           2，图片设置 width:100% 

        */

        .p-0{

            padding: 0;

        }

        img{

            width: 100%;

        }

    </style>

</head>

<body>

    <div class="container-fluid">

        <div class="row box-wrap">

            <div class="col-md-12 col-xs-12 p-0">

                <img src="./images/bg1.jpg" alt="" class="img-responsive">

            </div>

            <div class="col-md-12 col-xs-12">.col-md-1</div>

            <div class="col-md-12 col-xs-12">.col-md-1</div>

        </div>

    </div> 

    <div class="main">

        <div class="container">

           

        </div>        

    </div>

</body>

</html>