适合图像引导程序的边框答案

【问题标题】：fit border around image bootstrap适合图像引导程序的边框
【发布时间】：2016-06-15 12:31:05
【问题描述】：

我目前正在尝试在图像周围设置边框，不幸的是 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;
}

如您所见，图像周围的边框未正确安装。

任何帮助将不胜感激！

【问题讨论】：

标签： html css twitter-bootstrap

【解决方案1】：

我以前遇到过这个问题，我把图像的填充去掉了。它从未以任何方式影响我的设计。

您可能知道，您只需添加：

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

在您提出问题后，我也进行了一些挖掘，似乎其他人建议删除填充。

Bootstrap unwanted image padding

【讨论】：