[英]position of twitter button in twitter-bootstrap navbar
這是我的博客的主頁http://www.lowcoupling.com這是一個基於twitter引導的tumblr博客,您可以看到我剛剛將twitter按鈕放在導航欄的右側,緊跟在google plus之后按鈕。 我不明白為什么,當按鈕加載相關腳本時,它放置在欄的頂部而不是加號按鈕的相同高度。
引導程序在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的容器。
我也有這個煩人的問題。 我通過給錨定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>
我的解決方案更簡單-在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>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.