html - 在 Bootstrap 中向左浮动的 Div

Question

如何使用 bootstrap 将社交图标 float 到左侧，文本居中？

我在这里展示一张图片，我想要的。现在我使用 col-md-3 div 来 float ，但是 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>