固定导航栏隐藏Bootstrap

Question

我在使用标签时修复了隐藏内容的导航栏。当我没有在标签之间导航时，导航栏会正确显示，当我点击一个标签时，navabr会隐藏内容，包括标签的标题。

单击其中一个标签后，内容将被隐藏。

我尝试使用此功能，但仅在不在标签之间导航时才有效。

body{
margin-top: 80px;
}

这里的伙计是jsfiddle上的例子 我认为这可能是我的javascript的原因，当我没有使用hash它工作正常。当用户刷新页面时，我需要hash，最后一个打开的标签需要处于活动状态。

 $('#sign-up-tabs a').click(function (e) {
    e.preventDefault();
    $(this).tab('show');
});

// store the currently selected tab in the hash value
$("ul.nav-tabs > li > a").on("shown.bs.tab", function (e) {
    var id = $(e.target).attr("href").substr(1);
    window.location.hash = id;
});

// on load of the page: switch to the currently selected tab
var hash = window.location.hash;
$('#sign-up-tabs a[href="' + hash + '"]').tab('show');

解决： 我已经通过将我的代码更改为以下内容来解决它。

$('#sign-up-tabs').on('click', 'a', function (e) {
  e.preventDefault();
  // add this line
   window.location.hash = $(this).attr('href');
  $(this).tab('show');
 });
// on load of the page: switch to the currently selected tab
  var hash = window.location.hash;
 $('#sign-up-tabs a[href="' + hash + '"]').tab('show');

on jsfiddle

Answer 1

您必须更改导航栏容器才能使用display: block。

如果它还没有放入容器内，你应该将它放在一个div中，它可能会像魅力一样。

例如，如果你正在使用：

<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
  <div class="navbar-header">
    <!-- the rest of your code -->
  </div>
</nav>

您应该将其更改为：

<div style="height: 80px">
  <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
    <div class="navbar-header">
      <!-- the rest of your code -->
    </div>
  </nav>
</div>

Answer 2

根据导航栏高度将顶部填充物添加到容器中。 例如，如果导航栏高度为90px，则必须为容器提供顶部填充90px。

.container {
    padding-top:170px;
}