首页 文章

Twitter Bootstrap - 阻止页面顶部内容的顶部导航栏

提问于
浏览 次
269

我有这个Twitter Bootstrap代码

<div class='navbar navbar-fixed-top'>
    <div class='navbar-inner'>
      <div class='container'>
        <a class='btn btn-navbar' data-target='.nav-collapse' data-toggle='collapse'>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
          <span class='icon-bar'></span>
        </a>
        <div class='nav-collapse'>
          <ul class='nav'>
            <li class='active'>
              <a href='some_url'>My Home</a>
            </li>
            <li>
              <a href='some_url'>Option 1 </a>
            </li>
            <li>
              <a href='some_url'>Another option</a>
            </li>
            <li>
              <a href='some_url'>Another option</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>

但是当我查看页面的开头时，导航栏会阻止页面顶部附近的一些内容 . 如果在查看页面顶部时如何降低其余内容，以便内容不会被导航栏阻止，是否有任何想法？

twitter-bootstrap

17 回答

  • -1

    添加到您的CSS：

    body { 
    padding-top: 65px; 
}

    来自Bootstrap docs：

    固定导航栏将覆盖您的其他内容，除非您在主体顶部添加填充 .

    回复于
  • 351

    如果您使用响应式引导程序，那么添加这样的填充是不够的 . 在这种情况下，当您调整窗口大小时，您将在页面顶部和导航栏之间产生间隙 . 一个合适的解决方案如下：

    body {
  padding-top: 60px;
}
@media (max-width: 979px) {
  body {
    padding-top: 0px;
  }
}
    回复于
  • 0

    对于bootstrap 3，类 navbar-static-top 而不是 navbar-fixed-top 可以防止出现此问题，除非您需要始终显示导航栏 .

    回复于
  • 1

    一个更方便的解决方案供您参考，它在我的所有项目中都很完美：

    改变你的第一个'div'

    <div class='navbar navbar-fixed-top'>

    至

    <div class="navbar navbar-default navbar-static-top">
    回复于
  • 136

    我正在使用jQuery来解决这个问题 . 这是BS 3.0.0的片段：

    $(window).resize(function () { 
    $('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);
});

$(window).load(function () { 
    $('body').css('padding-top', parseInt($('#main-navbar').css("height"))+10);        
});
    回复于
  • 16

    我在真正的固定导航栏之前创建了一个虚拟的非固定导航栏，取得了很大的成功 .

    <nav class="navbar navbar-default"></nav> <!-- Dummy nav bar -->
<nav class="navbar navbar-default navbar-fixed-top"> <!-- Real nav bar -->
    <!-- Nav bar details -->
</nav>

    所有屏幕尺寸的间距都很大 .

    回复于
  • 215

    在我从MVC 5 tutorial派生的项目中，我发现改变身体填充没有效果 . 以下对我有用：

    @media screen and (min-width:768px) and (max-width:991px) {
    body {
        margin-top:100px;
    }
}
@media screen and (min-width:992px) and (max-width:1199px) {
    body {
        margin-top:50px;
    }
}

    它解决了导航栏折叠成2或3行的情况 . 这可以在行身体{margin：0;之后的任何地方插入bootstrap.css }

    回复于
  • 1

    如在Twitter的this example上所见，在包含响应样式声明的行之前添加此内容：

    <style> 
    body {
        padding-top: 60px;
    }
</style>

    像这样：

    <link href="Z/bootstrap/css/bootstrap.min.css" rel="stylesheet" />
<style type="text/css">
    body {
        padding-top: 60px;
    }
</style>
<link href="Z/bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" />
    回复于
  • 1

    bootstrap v4 starter template css使用：

    body {
  padding-top: 5rem;
}
    回复于
  • 7

    使用 navbar navbar-default 一切正常，但如果您使用的是 navbar-fixed-top ，则必须包含自定义样式正文{padding-top：60px;}否则会阻止下面的内容 .

    回复于
  • 4

    使用MVC 5，我修复我的方法是简单地添加我自己的Site.css，加载其他的，使用以下行： body{padding: 0}

    并且我在_Layout.cshtml的开头更改了代码：

    <body>
    <div class="navbar navbar-inverse navbar-static-top">
        <div class="container">
            @if (User.Identity.IsAuthenticated) {
                <div class="top-navbar">
    回复于
  • 56

    使用 percentage 是比 pixels 好得多的解决方案 .

    body {
  padding-top: 10%; //This works regardless of display size.
}

    如果需要，你仍然可以通过添加 breakpoints ，如 @spajus 在另一个答案中提到的那样

    回复于
  • 0

    这里会出现两个问题：

    • 页面加载（内容隐藏）

    • 这样的内部链接将滚动到顶部，并被导航栏隐藏：

    <nav> ... </ nav> <！ - 70像素高 - >

    <a href="#hello">你好</a> <！ - 点击向下滚动 - >

    <hr style =“margin：100px”> <h1 id =“hello”> World </ h1> <！ - 帮助！我隐藏了70像素！ - >

    Bootstrap 4 w /内部页面链接

    要修复1），正如Martijn Burger上面所说，bootstrap v4启动模板css使用：

    body {
  padding-top: 5rem;
}

    要修复2）请查看this issue . 这段代码大部分都有效（但不是第二次点击相同的哈希）：

    window.addEventListener("hashchange", function() { scrollBy(0, -70) })

    这段代码用jQuery（不是瘦jQuery）动画链接：

    // inline theme global code here
  $(document).ready(function() {
    var body = $('html,body'), NAVBAR_HEIGHT = 70;
    function smoothScrollingTo(target) {
      if($(target)) body.animate({scrollTop:$(target).offset().top - NAVBAR_HEIGHT}, 500);
    }
    $('a[href*=\\#]').on('click', function(event){
      event.preventDefault();
      smoothScrollingTo(this.hash);
    });
    $(document).ready(function(){
      smoothScrollingTo(location.hash);
    });
  })
    回复于
  • 9

    你应该补充一下

    #page 
 { 
   padding-top: 65px
 }

    不要破坏粘性页脚或其他东西

    回复于
  • -2
    <div class='navbar' data-spy="affix" data-offset-top="0">

    如果您的导航栏最初位于页面顶部，请将值设置为0.否则，请将 data-offset-top 的值设置为导航栏上方内容的值 .

    同时，你需要修改 css ：

    .affix{
  width:100%;
  top:0;
  z-index: 10;
}
    回复于
  • 2

    添加到你的JS：

    jQuery(document).ready(function($) {
  $("body").css({
    'padding-top': $(".navbar").outerHeight() + 'px'
  })
});
    回复于
  • 4

    您可以根据屏幕分辨率设置边距

    @media screen and (min-width:768px) and (max-width:991px) {
body {
    margin-top:100px;
}

@media screen and (min-width:992px) and (max-width:1199px) {
  body {
    margin-top:50px;
  }
}

body{
  padding-top: 10%;
}

#nav{
   position: fixed;
   background-color: #8b0000;
   width: 100%;
   top:0;
}
    回复于

相关问题