适合图像引导程序周围的边框

Question

我目前正在尝试在图像周围设置边框，不幸的是，bootstrap并不容易。似乎他们在列中添加了填充，这阻止了边框的拟合。我不确定是否有办法在不删除padding bootstrap提供的情况下执行此操作。这是我的代码

<section class="part2">
    <div class="container">
    <div class="row"> 
 <img src="/wp-content/themes/creativeforces/images/kid2.jpg" class="resize-image col-sm-4" id="image1" alt="">
  <img src="/wp-content/themes/creativeforces/images/kid2.jpg" class="resize-image col-sm-4" alt="">
   <img src="/wp-content/themes/creativeforces/images/kid2.jpg" class="resize-image col-sm-4" alt="">
    </div>
        <div class="row">

        <div>   
            <p class="text-center col-md-4">Teach</p>
        <div>
            <p class="text-center col-md-4">Read</p>
        </div>
        <div>
             <p class="text-center col-md-4">Play<p>
        </div>

    </div>


    </div>
</section>



.part2{
  background-color: #EEEEEE;
  // width:100%;
margin-top: 30px;
padding-bottom: 20px;
padding-top: 20px;

}

#image1{
  border: 3px solid #000;
}

正如您所看到的，图像周围没有正确安装边框。

任何帮助将不胜感激！

Answer 1

之前我遇到过这个问题，我从图像中取出了填充物。它从未以任何方式影响我的设计。

您可能知道只需添加：

#image1{
    border: 3px solid #000;
    padding: 0;
}

在你提出问题之后我也做了一些挖掘，似乎有人建议删除填充。

Bootstrap unwanted image padding