Question

我有一个带固定导航栏的bootstrap 3.x布局。如果菜单太长，则标题（类页眉）不可见，因为菜单太高。见print screen

<body>      
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="#">Project name</a>
      </div>
      <div id="navbar" class="collapse navbar-collapse">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#about">About</a></li>
          <li><a href="#contact">Contact</a></li>              
          <li><a href="#contact">Test #1</a></li>
          <li><a href="#contact">Test #2</a></li>
          <li><a href="#contact">Test #3</a></li>
          <li><a href="#contact">Test #4</a></li>
          <li><a href="#contact">Test #5</a></li>
          <li><a href="#contact">Test #6</a></li>
          <li><a href="#contact">Test #7</a></li>
          <li><a href="#contact">Test #8</a></li>
          <li><a href="#contact">Test #9</a></li>
        </ul>
      </div>          
    </div>
  </nav> 
  <div class="container">
    <div class="page-header">
      <h1>Sticky footer with fixed navbar</h1>
    </div>
    <p class="lead">Test</p>
    <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
  </div>    
  <footer class="footer">
    <div class="container">
      <p class="text-muted">Place sticky footer content here.</p>
    </div>
  </footer>
</body>

请参阅示例：jsfiddle 我不知道菜单会有多长（它生成的代码并取决于用户权限）。我只需要菜单太高，内容应该下降。

Answer 1

我有解决这个问题的方法。你可以jquery来做。代码下面是

var nav_height = $('.navbar-fixed-top').height();
$('body').css('padding-top',nav_height );

查看jsfiddle

上的实时演示

如何使用长固定导航栏修复boostrap布局？

1 个答案: