css - Jumbotron中的社交图标更接近

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

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>

最佳答案

最好不要对每个图标使用单独的列，而应在所有图标周围使用一列：

<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>

关于css - Jumbotron中的社交图标更接近，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38232233/