html - 我的引导容器没有获得完整宽度。如何解决这个问题呢？

Question

我希望所有图像都有全宽。但我在左右两侧都有一些填充。我怎么解决这个问题？这是我的页面的图片:

这是我的 HTML 代码:

<div class="container-fluid">
      
        <div class="col"><a href="about.html"><img style="object-position: 60% 0%;" src="images/Life/1.jpg" alt=""></a></div>
        <div class="col"><a href=""><img src="images/Life/3.jpg" alt=""></a></div>
        <div class="col"><a href=""><img src="images/Lakers/L1000857.JPG" alt=""></a></div>
        <div class="col"><a href=""><img src="images/Lakers/L1000883.JPG" alt=""></a></div>
        <div class="col"><a href=""><img src="images/Others/1.jpg" alt=""></a></div>
        <div class="col"><a href=""><img src="images/Others/2.jpg" alt=""></a></div>
        <div class="col"><a href=""><img style="object-position: 60% 0%;" src="images/About/About me.jpg" alt=""></a></div>
    </div>

和我的CSS:

.container-fluid{
    padding: 0 !important;
    margin: 0  !important;
}
img{
    padding: 0 !important;
    margin: 0  !important;
    height: 350px;
    width: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    object-fit: cover;
    object-position: 60% 30%;

}

Answer 1

col 类默认具有 padding-left: 15px 和 padding-right: 15px。可以通过应用 p-0 Bootstrap 类来删除它:

<div class="container-fluid">

    <div class="col p-0"><a href="about.html"><img style="object-position: 60% 0%;" src="images/Life/1.jpg" alt=""></a>
    </div>
    <div class="col p-0"><a href=""><img src="images/Life/3.jpg" alt=""></a></div>
    <div class="col p-0"><a href=""><img src="images/Lakers/L1000857.JPG" alt=""></a></div>
    <div class="col p-0"><a href=""><img src="images/Lakers/L1000883.JPG" alt=""></a></div>
    <div class="col p-0"><a href=""><img src="images/Others/1.jpg" alt=""></a></div>
    <div class="col p-0"><a href=""><img src="images/Others/2.jpg" alt=""></a></div>
    <div class="col p-0"><a href=""><img style="object-position: 60% 0%;" src="images/About/About me.jpg" alt=""></a>
    </div>
  </div>

Read more about spacing here