Bootstrap响应式设计：解决顶部固定DIV遮挡内容的问题

我来帮你解决这个移动端内容被固定顶部的搜索栏遮挡的问题，优先给你推荐纯CSS方案，也准备了适配AngularJS的JavaScript方案作为备选：

因为页面里有两个固定在顶部的元素（导航栏固定70px + 高度随屏幕变化的搜索栏），固定定位的元素会脱离正常文档流，所以下方的内容容器需要根据屏幕尺寸添加对应的顶部内边距，来避开这两个固定元素。

具体操作步骤：

1. 先给搜索栏的外层容器加个专属类名，比如search-bar-container，方便后续CSS定位（建议把内联样式移到外部CSS文件里，更易维护）：

<div class="container search-bar-container">
  <div class="col-md-12 fixed-top" style="background-color: white">
    <!-- 你的搜索栏表单内容 -->
  </div>
</div>

2. 给下方的内容容器添加一个类名content-container，然后在CSS里用媒体查询设置不同屏幕下的内边距：

/* 桌面端（md及以上屏幕，宽度≥768px）：导航栏70px + 搜索栏100px = 170px */
.content-container {
  padding-top: 170px;
}

/* 移动端（sm及以下屏幕，宽度<768px）：导航栏70px + 搜索栏约200px = 270px */
@media (max-width: 767px) {
  .content-container {
    padding-top: 270px;
  }
}

3. 最后把内容容器的类加上：

<div class="container content-container"> Some content.. </div>

这样就能保证桌面端和移动端的内容都不会被顶部的固定元素遮挡，纯CSS方案简单高效，完全符合你的需求。

如果搜索栏的高度不是固定值（比如某些设备上字体大小变化导致高度波动），可以用AngularJS指令来实时计算顶部固定元素的总高度，动态设置内容容器的内边距：

1. 在你的AngularJS应用里创建一个指令：

angular.module('你的应用名').directive('adjustContentPadding', function($window) {
  return {
    link: function(scope, element) {
      // 计算顶部两个固定元素的总高度
      function updatePadding() {
        const navbarHeight = document.querySelector('.navbar').offsetHeight;
        const searchBarHeight = document.querySelector('.search-bar-container .fixed-top').offsetHeight;
        const totalTopHeight = navbarHeight + searchBarHeight;
        element.css('padding-top', `${totalTopHeight}px`);
      }

      // 页面初始化时先计算一次
      updatePadding();

      // 监听窗口大小变化，实时更新内边距
      angular.element($window).on('resize', function() {
        updatePadding();
        scope.$apply(); // 触发AngularJS的脏检查，确保视图更新
      });
    }
  };
});

2. 在内容容器上使用这个指令：

<div class="container" adjust-content-padding> Some content.. </div>

这个方案会自动适配任何顶部固定元素的高度变化，完全兼容AngularJS项目。

• 尽量把内联样式（比如搜索栏的background-color、border）移到外部CSS文件中，方便统一修改和维护。
• 可以给搜索栏的fixed-top元素设置合适的z-index，确保它在导航栏上方（比如导航栏用z-index:1020，搜索栏用z-index:1030），避免层级重叠问题。

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