열의 가운데 아이콘

Question

부트 스트랩 열에 일부 아이콘을 가운데에 놓으려고합니다. 페이지가 커지면 중앙에 배치되지만 너비가 작아지면 아이콘이 열 안의 오른쪽에 나타납니다. 이것은 희망이 없겠지만, 창 크기에 관계없이 아이콘을 중앙에 두는 방법이 있습니까?

가 여기에 HTML 여기

<div class="row text-center" style="padding: 4px 2.5em 4px 2.5em;"> 

    <div class="col-xs-3 text-center"> 
     <a class="subtle-link" href="#" target="_blank"><i class="fa fa-lg fa-twitter-square"></i></a> 
    </div> 

    <div class="col-xs-3"> 
     <a class="subtle-link" href="#" target="_blank"><i class="fa fa-lg fa-instagram"></i></a> 
    </div> 

    <div class="col-xs-3"> 
     <a class="subtle-link" href="#" target="_blank"><i class="fa fa-lg fa-facebook-square"></i></a> 
    </div> 

    <div class="col-xs-3"> 
     <a class="subtle-link" href="#" target="_blank"><i class="fa fa-lg fa-google-plus-square"></i></a> 
    </div> 

</div> 

하는 jFiddle입니다 :

http://jsfiddle.net/3ufoa55d/

Answer 1

이 때문에 부트 스트랩 "COL-XS-3"스타일의 왼쪽과 오른쪽 패딩의 발생합니다. 나는 당신의 바이올린이 CSS를 추가하고, 나를 위해 잘 작동 :

.icons-group .col-xs-3 { 
    padding: 0; 
} 

도 내가 위의 CSS에 대한 범위를 설정하기 위해 "아이콘 그룹"스타일로

<div class="row text-center icons-group" style="padding: 4px 3em 4px 3em;"> 

사업부를 표시했다.