Блог

Как я могу переместить значки социальных сетей влево с помощью bootstrap с центрированием текста?

Я показываю здесь изображение, то, что я хочу. Теперь я использую дивы col-md-3 для перемещения, но между дивами слишком много свободных пространств.

 <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=NEWSFEEDamp;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>
  

Я думаю, вам не нужно использовать 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=NEWSFEEDamp;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>  

Для этого вам не нужен адаптивный класс, вы можете просто использовать отступы или поля.

попробуйте это:

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=NEWSFEEDamp;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=NEWSFEEDamp;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=NEWSFEEDamp;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;
}
  

Надеюсь, я вам помог