修复了导航栏在 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;
}