Twitter Bootstrap padding失效：导航栏与内容布局异常修复求助

首先，你的核心问题出在HTML结构错误和padding的应用对象不当，导致背景和导航栏的表现不符合预期。咱们一步步来修复：

1. 先修正无效的HTML结构 #

你现在把<div id="header">放在了<body>标签外面，这是不符合HTML规范的！浏览器会自动修正这个错误，但可能导致fixed定位的导航栏表现异常。正确的结构应该是把header放到<body>内部，所有可见内容都要包裹在<body>里：

<body>
  <div id="header">
    <!-- 导航栏内容 -->
  </div>
  <div id="slide1">
    <!-- 页面内容 -->
  </div>
</body>

另外，你的导航栏<ul>里直接放了<a>标签，这也是错误的，应该用<li>包裹每个导航链接，否则会破坏列表结构：

<ul class="navbar-nav">
  <li><a class="nav-item nav-link" href="#slide3">How it Works</a></li>
  <li><a class="nav-item nav-link" href="#slide4">For Landlords</a></li>
  <li><a class="nav-item nav-link" href="#">F.A.Q</a></li>
  <li><a class="nav-item nav-link" href="#pricingslide">Pricing</a></li>
</ul>

2. 调整CSS，让内容下移而导航栏和背景不动 #

你之前给body加padding-top:65px，会把整个body的内容（包括#slide1）往下推，但你的导航栏是position:fixed（脱离文档流，不受body布局影响），而#slide1的背景是fixed定位（相对于视口固定），结构错误可能让背景的fixed效果失效，才出现了背景被推向下的问题。

正确的做法是：

• 去掉body的padding-top
• 给**第一个内容区块（也就是#slide1）**添加顶部间距，值等于导航栏的高度（80px），这样只有内容区块的内容会被推到导航栏下方，而导航栏和背景会保持在视口顶部。

方案一：调整#slide1的padding-top #

修改后的CSS：

body { margin: 0; width: 100%; } /* 去掉原有的padding-top */
#header { 
  background-color: grey; 
  opacity: .7; 
  width: 100%; 
  height: 80px; 
  position: fixed; 
  z-index: 1000; 
  top: 0; /* 加上top:0确保导航栏牢牢固定在顶部 */
}
#slide1 { 
  width: 100%; 
  background: url('sunrise.png') 50% 0 no-repeat fixed; 
  background-size: cover; 
  color: #ffffff; 
  height: 700px; 
  margin: 0; 
  padding: 120px 0 260px 0; /* 把原padding-top的40px改成40+80=120px，刚好避开导航栏 */
}

方案二：给#slide1加margin-top #

如果不想调整内边距，也可以用外边距实现：

#slide1 { 
  /* 其他样式不变 */
  margin-top: 80px; /* 等于导航栏高度，把内容推到下方 */
  padding: 40px 0 260px 0; /* 保留原来的上下内边距 */
}

为什么这样有效？ #

• position:fixed的导航栏会脱离文档流，加上top:0后会始终固定在视口顶部，不受其他元素布局影响。
• #slide1的背景是fixed定位，所以不管#slide1怎么移动，背景都会固定在视口顶部。
• 给#slide1加顶部间距，只会让这个内容区块的内容下移避开导航栏，而背景和导航栏依然保持在顶部位置。

内容的提问来源于stack exchange，提问作者SupremeA