这是我博客的主页http://www.lowcoupling.com 这是一个基于 twitter bootstrap 的 tumblr 博客 正如你所看到的,我刚刚将 twitter 按钮放置在导航栏右侧的 google plus 按钮后面。 我不明白为什么,当按钮加载相关脚本时,它被放置在栏的顶部,而不是与加号按钮处于同一高度。
最佳答案
bootstrap 在 nav>a 元素上应用了一些样式。生成的 google+ 标签位于链接标签内。另一位则不然。一种快速解决方案是将第二个标签 (twitter) 的脚本包含在链接标签内。
<li><a> <---
<a href="https://twitter.com/lowcoupling" class="twitter-follow-button" data-show-count="true" data-show-screen-name="false">Follow @lowcoupling</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</a></li> <----
更新
脚本不将链接标记视为容器,因此上述内容不起作用。一个有效的方法是给你的 li 标签, <li style="padding: 14px 15px;"></li>
。但你能做的最好的事情就是检查 bootstrap css 中的 nav>a 样式,并将它们复制到你自己的类中,然后将其提供给 iframe 的容器。
关于html - Twitter 按钮在 twitter-bootstrap 导航栏中的位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19334811/