html - twitter-bootstrap 导航栏中 twitter 按钮的位置

Question

这是我博客的主页http://www.lowcoupling.com 它是一个基于 twitter bootstrap 的 tumblr 博客，正如你所见，我刚刚将 twitter 按钮放在导航栏右侧的 google plus 之后按钮。我不明白为什么，当按钮加载相关脚本时，它被放置在栏的顶部，而不是在加号按钮的同一高度。

Answer 1

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>. 但是您能做的最好的事情是检查引导 css 中的 nav>a 样式并将它们复制到您自己的类中，然后将其提供给 iframe 的容器。

Answer 2

我也遇到了这个烦人的问题。我通过给我的锚点一个 ID 来修复它，然后使用 jQuery 将 Twitter 渲染的内容移动到我的锚点中：

<ul class="nav navbar-nav navbar-right">
    <!-- Note the ID I put on the link -->
    <li><a href="#" id="twitter-fix">
        <a href="https://twitter.com/Whatever" class="twitter-follow-button" data-show-count="false">Follow @Whatever</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');
            // Custom fix here
            $(".nav .twitter-follow-button").detach().appendTo("#twitter-fix");
        </script>
    </a></li>
    <li><a href="#">Other link</a></li>
</ul>

Answer 3

我的解决方案更简单 - 在 twitter 按钮上方添加一行，并使用 font-size 设置高度。这是我 style.css 中的代码：

#twitter-fix {
  font-size: 7px;
}

这是在我的导航栏中（注意 br 标签）：

<ul class="nav navbar-nav navbar-right">
  <li id="twitter-fix"><br>
  <a href="https://twitter.com/UserName" class="twitter-follow-button"
  data-size="large" data-show-count="false">Follow @UserName</a>
  <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
  </li>
</ul>