4

我使用 Twitter Bootsrap 的导航栏在我的网站顶部放置一个导航栏。(class="navbar navbar-fixed-top")
我还需要使用谷歌翻译小部件。
我使用这里写的工具。

但是当用户选择一种语言进行翻译时，谷歌会在我的页面顶部放置一个水平导航栏。该栏掩盖了我自己的导航栏。我需要我的导航栏出现在谷歌水平栏的正下方。

我应该使用 z-index 吗？但在那种情况下，其中一个会掩盖其他导航栏？有更好的解决方案吗？将其中一个显示在另一个下方？谢谢

编辑：当我在页面顶部添加以下代码时，Google 在我的导航栏之前放置了一个导航栏，一切看起来都很好。但不好的是，Google 的导航栏对每个用户都是可见的。我只需要向不说我页面语言的用户展示。

<div id="google_translate_element"></div><script>
function googleTranslateElementInit() {
  new google.translate.TranslateElement({
    pageLanguage: 'fr',
    layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL
  }, 'google_translate_element');
}
</script><script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>

编辑：我想没有像“如果语言不同则显示谷歌翻译”和“显示单杠。如果我在不考虑用户语言的情况下加载单杠，一切正常。但母语人士看到谷歌翻译栏。哪个从我的页面中占用空间。

4

4 回答 4

9

这将是一个丑陋的解决方案，但很快。

点击后标签会自动添加 class="translated-ltr" 或 "translated-rtl"。使用这些类来破解您的固定标题。

html.translated-ltr .navbar-inner, html.translated-ltr .navbar-inner { padding-top: 39px; }
于 2012-06-05T11:25:04.443 回答
1

简单的选择是

<div class="navbar-inner" style="padding-top:39px;">
于 2012-06-02T14:06:42.117 回答
1

我使用 jQuery 来检查它，我使用这个代码：

setInterval(function(){ 
if ( $('html').hasClass('translated-ltr')) {
  $('.navbar').css('margin-top','30px');
}else{
  $('.navbar').css('margin-top','0px');
}
}, 3000);
于 2018-04-29T06:40:46.270 回答
-1

在你的 CSS 中：

body {
    padding-top: 60px;
}

.navbar-fixed-top {
    position: relative;
    top: -60px;
}
于 2014-09-10T12:35:58.320 回答