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>

我希望推特和图片中的链接更加接近。似乎无法弄清楚......帮助！ https://knowledge.autodesk.com/support/autocad/learn-explore/caas/CloudHelp/cloudhelp/2016/ENU/AutoCAD-Core/files/GUID-CBB24068-1654-4753-BE2E-1D0CE9700411-htm.html

Answer 1

您正在使用Twitter bootstrap，因此您可以利用其捆绑的网格类。值得注意的是，.row项目中的项目将受其默认的负边距（用于抵消列排水）的限制，因此至少应包含在.col-xs-12中，以便它们对齐与其他列项目。

我已经使用.col-**-x和.col-**-offset-x包含了一些建议的类来限制.nav-tabs部分的宽度。

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

使Bootstrap图像（svg）更加靠近

1 个答案: