Css 如何使用Bootstrap 3将两个图像并排居中？

我似乎无法同时看到“社会”阶层的两个形象，这两个形象位于“col-sm-4”阶层专栏的中心。相反，它们会随着屏幕大小的减小而堆叠。你知道我该怎么做吗

HTML

尝试：

---

在img之前添加class

text center

。像这样

<div class="text-center">
  <img class="social" src="https://files.allaboutbirds.net/wp-content/themes/html5blank-stable/images/blue-winged-warbler.jpg">
  <img class="social" src="https://files.allaboutbirds.net/wp-content/themes/html5blank-stable/images/blue-winged-warbler.jpg">
</div>

这里演示

.row{
   border-top: 1px solid #808080;
   padding-left: 10px;
   padding-right: 10px;
   padding-bottom: 10px;
}

.col-sm-4{
   height: 450px;
}

.img-circle{
   height: 200px;
   width: 200px;
   margin: 0 auto;
   position: relative;
   top: 40px;
   border: 2px solid white;
}

.text-center{
   font-family: helvetica;
   color: white;
   position: relative;
   top: 50px;
}

span{
   font-weight: bold;   
   background-color: #e6e6e6;
   color: #3FA2B2;
   padding: 3px 7px 3px 7px;
}

.social{
   height: 50px;
   width: 50px;
   margin: 0 auto;
}

.social {
 display: inline-block;
}

<div class="text-center">
  <img class="social" src="https://files.allaboutbirds.net/wp-content/themes/html5blank-stable/images/blue-winged-warbler.jpg">
  <img class="social" src="https://files.allaboutbirds.net/wp-content/themes/html5blank-stable/images/blue-winged-warbler.jpg">
</div>