顶部导航栏阻止页面的顶部内容 [英] top nav bar blocking top content of the page

问题描述

我有此Twitter Bootstrap代码

I have this Twitter Bootstrap code

  <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>

但是，当我查看页面的开头时，导航栏阻止了页面顶部附近的某些内容.您是否有任何想法让它在查看页面顶部时将其余内容压低，从而使内容不会被导航栏阻挡?

But when I am viewing the beginning of the page, the nav bar is blocking some of the content that is near the top of the page. Any idea for how to make it push down the rest of the content lower when the top of the page is viewed so that the content isn't blocked by the nav bar?

推荐答案

添加到CSS:

body { 
    padding-top: 65px; 
}

从引导文档:

除非您将填充添加到正文顶部，否则固定的导航栏将覆盖您的其他内容.

The fixed navbar will overlay your other content, unless you add padding to the top of the body.

这篇关于顶部导航栏阻止页面的顶部内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！