css - Jumbotron 中的社交偶像更近了

Question

我正在尝试缩小社交图标之间的间隙/边距，并使其在文本下方居中。

Jumbotron

代码如下:

div class="jumbotron"><!-- Jumbotron -->
<div class="container1">
    <p>A blog to explore, learn, and share Electro Funk, Soul, & Hip Hop Music</p>

        <div id="social"><!-- Social Icons -->
                <div id="twitter" class="col-md-4">
                  <a href="https://twitter.com/FunkFantasizers" target="_blank"><i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i></a>
                    Twitter
                </div>
                <div id="instagram" class="col-md-4">
                    <i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
                    Instagram
                </div>
                <div id="soundcloud" class="col-md-4">
                   <a href="https://soundcloud.com/funk-fantasizers" target="_blank"><i class="fa fa-soundcloud fa-2x" aria-hidden="true"></i></a>
                    Soundcloud
                </div>

        </div>
</div>

Answer 1

最好不要为每个图标使用单独的列，而是使用围绕它们的一列:

<div id="social" class="col-md-12 text-center"><!-- Social Icons -->
  <div id="twitter">
    <a href="https://twitter.com/FunkFantasizers" target="_blank"><i class="fa fa-twitter-square fa-2x" aria-hidden="true"></i></a>
    Twitter
  </div>
  <div id="instagram">
    <i class="fa fa-instagram fa-2x" aria-hidden="true"></i>
    Instagram
  </div>
  <div id="soundcloud">
    <a href="https://soundcloud.com/funk-fantasizers" target="_blank"><i class="fa fa-soundcloud fa-2x" aria-hidden="true"></i></a>
    Soundcloud
  </div>
</div>