Question

我从github gist中跟随这个example来对齐同样高度的社交按钮，但我不确定为什么它没有在我的版权文本旁边对齐。它显示了新行下的按钮，但我希望它与版权文本显示在同一行。我也在使用Bootstrap。我该如何解决这个问题？

HTML：

<footer class="footer">
  <div class="container">
    <span class="copyright text-muted">Copyright ©2016 example.com. All Rights Reserved</span>
    <div class="social">  
      <span class="twitter">
        <a href="http://twitter.com/share" class="twitter-share-button" data-url="http://www.example.com">Tweet</a>
      </span>
      <span class="Facebook"><iframe src="https://www.facebook.com/plugins/like.php?href=https://gist.github.com/thebigreason/1296097&amp;show_faces=false&amp;layout=button_count" scrolling="no" frameborder="0" style="height: 21px; width: 100px" allowTransparency="true"></iframe>
        </span>
      <span class="google">
        <div class="g-plusone" data-size="medium" data-annotation="inline" data-width="300"></div>
      </span>
    </div>
  </div>
</footer>

的CSS：

.footer {
  position: absolute;
  bottom: 30px;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 0px;
  background-color: transparent;
}
/* This gets Google to fall into place */
.social {
    font-size: 1px;
}
/* This gets Facebook to fall into place */
.social iframe {
    vertical-align: bottom;
}
/* Set an optional width for your button wrappers */
.social span {
    display: inline-block;
    width: 110px;
}
/* Adjust the widths individually if you like */
.social .google {
    width: 75px;
}

jsfiddle

Answer 1

只需添加此CSS。

.container span, .container .social {
  display: inline-block;
}

Answer 2

您还必须为copyright添加css，并在social类中进行编辑，添加以下css：

.copyright{display:inline-block;}

将display：inline-block添加到以下类

.social {font-size: 1px; display:inline-block;}

Answer 3

您可以使用引导网格系统将两列相互连接起来，因此您可以使用col-md-6包装您的版权：

<div class="col-md-6">
     <span class="copyright text-muted">Copyright ©2016 example.com. All Rights Reserved</span>
</div>

和社交一样：

<div class="col-md-6">
    <div class="social">  
      ...
    </div>
</div>

如何在页脚内对齐版权文本旁边的社交按钮？

3 个答案: