如何將兩個圖像與Bootstrap 3並排放置？

Question

我似乎無法並排獲得類'社交'的兩個圖像，這是班級'col-sm-4'的中心部分。相反，它們隨着屏幕尺寸的減小而疊加。任何想法如何做到這一點回應？

HTML

<div class="container-fluid"> 
    <div class="row" style="border-top: 0"> 
      <!-- Profile info --> 
      <div class="col-sm-4 col-sm-offset-4"> 
       <img class="img-circle img-responsive" src="images/callum.jpg"> 
       <h1 class="text-center" style="color: #3FA2B2">Callum Messiter</h1> 
       <p class="text-center">100-trillion cells and 100-billion neurons defying the 1 in 10<sup>2,685,000</sup> chance of me existing.</p> 
       <img class="social" src="images/twitter.png"> 
       <img class="social" src="images/github.png"> 
      </div> 
    </div> 
</div> 

CSS

.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; 
} 

Answer 1

IMG之前添加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> 

DEMO這裏https://jsfiddle.net/ff9g43t8/

Answer 2

嘗試：

.social { 
display: inline-block; 
}