divs가 부트 스트랩에서 왼쪽으로 떠 있습니다.

Question

소셜 아이콘을 부트 스트랩으로 왼쪽으로 뜨고 텍스트를 가운데에 배치 할 수 있습니까?

이미지를 여기에 표시하는 임, 내가 원하는 것. 이제 col-md-3 div를 부동으로 사용하지만 div 사이에는 여유 공간이 많이 있습니다.

<div class="col-md-12 footer_social_divs_box"> 

    <div class="col-md-3 footer_social_divs text-center"> 
       <a href="https://www.facebook.com/Ferrari/?hc_ref=NEWSFEED&fref=nf" title="Facebook" target="_blank"><i class="fa fa-facebook-official" aria-hidden="true"></i></a> 
      </div><div class="col-md-3 footer_social_divs text-center"> 
       <a href="https://twitter.com/maldives" title="Facebook" target="_blank"><i class="fa fa-twitter-square" aria-hidden="true"></i></a> 
      </div><div class="col-md-3 footer_social_divs text-center"> 
       <a href="https://www.youtube.com/channel/UCuKPYzX_LZicuVA0BsYDxeg" title="Facebook" target="_blank"><i class="fa fa-youtube-square" aria-hidden="true"></i></a> 
      </div><div class="col-md-3 footer_social_divs text-center"> 
       <a href="https://www.instagram.com/explore/tags/maldives/" title="Facebook" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a> 
      </div>   


</div> 

Answer 1

난 당신이에 responsive 클래스를 사용할 필요가 없습니다 같아요

.footer-responsive { 
 
    margin: 0 5px; 
 
    display: inline-block; 
 
} 
 

 
.text-center { 
 
    text-align: center; 
 
} 
 

 
.fa { 
 
    display: inline-block; 
 
    width: 32px; 
 
    height: 32px; 
 
    background: #000; 
 
}

<div class="col-md-12 footer_social_divs_box text-center"> 
 
    <div class="footer-responsive footer_social_divs text-center"> 
 
    <a href="https://www.facebook.com/Ferrari/?hc_ref=NEWSFEED&fref=nf" title="Facebook" target="_blank"><i class="fa fa-facebook-official" aria-hidden="true"></i></a> 
 
    </div> 
 
    <div class="footer-responsive footer_social_divs text-center"> 
 
    <a href="https://twitter.com/maldives" title="Facebook" target="_blank"><i class="fa fa-twitter-square" aria-hidden="true"></i></a> 
 
    </div> 
 
    <div class="footer-responsive footer_social_divs text-center"> 
 
    <a href="https://www.youtube.com/channel/UCuKPYzX_LZicuVA0BsYDxeg" title="Facebook" target="_blank"><i class="fa fa-youtube-square" aria-hidden="true"></i></a> 
 
    </div> 
 
    <div class="footer-responsive footer_social_divs text-center"> 
 
    <a href="https://www.instagram.com/explore/tags/maldives/" title="Facebook" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a> 
 
    </div> 
 
</div>

Answer 2

당신은 그것에 대해 반응하는 클래스가 필요하지 않습니다, 패딩이나 마진을 간단하게 사용할 수 있습니다.

Answer 3

이 시도 :

https://jsfiddle.net/leonardoaraujocosta/f070qpfh/

<div class="col-md-12 footer_social_divs_box"> 
    <div class="social_links_container"> 
    <div class="social_link_item"> 
     <a href="https://www.facebook.com/Ferrari/?hc_ref=NEWSFEED&fref=nf" title="Facebook" target="_blank"> 
     <span class="glyphicon glyphicon-superscript" aria-hidden="true"></span> 
     </a> 
    </div> 
    <div class="social_link_item"> 
     <a href="https://www.facebook.com/Ferrari/?hc_ref=NEWSFEED&fref=nf" title="Facebook" target="_blank"> 
     <span class="glyphicon glyphicon-superscript" aria-hidden="true"></span> 
     </a> 
    </div> 
    <div class="social_link_item"> 
     <a href="https://www.facebook.com/Ferrari/?hc_ref=NEWSFEED&fref=nf" title="Facebook" target="_blank"> 
     <span class="glyphicon glyphicon-superscript" aria-hidden="true"></span> 
     </a> 
    </div> 
    </div> 
</div> 

.social_links_container { 
    width: 300px; 
    margin: 0 auto; 
} 

.social_link_item { 
    width: 33%; 
    float: left; 
    color: white; 
    text-align: center; 
} 

은 내가 당신에게