您仍然可以使用img-responsive，而不影响使用此样式类的其他图像。

你可以在这个标签前面加上section id/ div id/class来定义一个img被嵌套的顺序。这个自定义的img-responsive将只在该区域工作。

假设你有一个HTML区域定义为:

<section id="work"> 
    <div class="container">
        <div class="row">
            <img class="img-responsive" src="some_image.jpg">
        </div>
    </div>
</section>

然后，你的CSS可以是:

section#work .img-responsive{
    margin: 0 auto;
}

注意:这个答案与整体改变img-responsive的潜在影响有关。当然，中心块是最简单的解决方案。

我建议采用更“抽象”的分类。添加一个新类"img-center"，它可以和.img-responsive类结合使用:

// Center responsive images
.img-responsive.img-center {
  margin: 0 auto;
}

要添加到已经给出的答案，将img-responsive与img-thumbnail结合使用将把display: block设置为display: inline block。

在Twitter Bootstrap 3中有.center-block类(从v3.0.1开始)，所以使用:

<img src="..." alt="..." class="img-responsive center-block" />

@media (max-width: 767px) {
   img {
     display: table;
     margin: 0 auto;
   }
}

尝试这段代码，它将工作的小图标也与bootstrap 4，因为没有中心块类是bootstrap 4，所以尝试这种方法，这将是有帮助的。你可以通过将。col-md-12设置为。col-md-8或。col-md-4来改变图像的位置，这取决于你。

<div class="container">
       <div class="row">
          <div class="col-md-12">
            <div class="text-xs-center text-lg-center">
           <img src="" class="img-thumbnail">
           </div>
          </div>
       </div>
  </div>