使 Bootstrap 图像 (svg) 靠得更近答案

【问题标题】：Make Bootstrap images (svg) closer together使 Bootstrap 图像 (svg) 靠得更近
【发布时间】：2017-03-27 11:20:50
【问题描述】：

<footer id="contact">
<div class="container">
<div class="row">
  <h3 class="connect">Let's Talk</h3>
    <ul class="nav nav-tabs nav-justified">
      <li role="presentation"><a href="https://twitter.com/">
<img src="images/social/twitter.svg" alt="twitter logo"></a></li>
      <li role="presentation"><a href="https://www.linkedin.com/in/"> <img src="images/social/linkedin.svg" alt="linkedin logo"></a></li>
    </ul>
  </div>
  <p class="copyright">Copyright &copy;</p>
  </div>
</footer>

我希望 Twitter 和图片中的链接更接近。似乎无法弄清楚...帮助！ enter image description here

【问题讨论】：

你可以将<ul>的宽度设置为30%左右。
您有任何可能有用的 CSS 标记吗？

标签： html css twitter-bootstrap svg

【解决方案1】：

您正在使用 twitter 引导程序，因此您可以利用其捆绑的网格类。值得注意的是，.row 项目内的项目将受其默认负边距的约束（用于抵消列间距），因此至少应包裹在 .col-xs-12 中，以便它们与其他列项目对齐.

我提供了一些建议的类来限制.nav-tabs 部分的宽度，同时使用.col-**-x 和.col-**-offset-x。

<footer id="contact">
    <div class="container">
        <div class="row">
            <div class="col-xs-12">
                <h3 class="connect">Let's Talk</h3>
            </div>
            <div class="col-xs-12 col-xs-offset-0 col-sm-8 col-sm-offset-2 col-md-6 col-md-offset-3 col-lg-4 col-lg-offset-4">
                <ul class="nav nav-tabs nav-justified">
                    <li role="presentation">
                        <a href="https://twitter.com/">
                            <img src="images/social/twitter.svg" alt="twitter logo">
                        </a>
                    </li>
                    <li role="presentation">
                        <a href="https://www.linkedin.com/in/">
                            <img src="images/social/linkedin.svg" alt="linkedin logo">
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <p class="copyright">Copyright &copy;</p>
    </div>
</footer>

【讨论】：