html - 使 Bootstrap 图像 (svg) 靠得更近

Question

<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

Answer 1

您使用的是 Twitter Bootstrap ，因此您可以利用其捆绑的网格类。值得注意的是，.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>