修复了导航栏在Bootstrap中隐藏内容的问题

Question

我有固定的导航栏，该导航栏在使用选项卡时隐藏内容。 当我不在选项卡之间导航时，导航栏会正确显示，当我单击一个选项卡时，导航栏会隐藏包括选项卡标题的内容。

单击选项卡之一后，内容将被隐藏。

我尝试使用此方法，但仅在不在选项卡之间导航时才有效。

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');

在jsfiddle上

Answer 1

您必须将navbars容器更改为使用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;
}