使用 Twitter Bootstrap 3 的网格时，panel-body 与 navbar-header 重叠

Question

出于某种原因，当我在 panel-body 中使用 col-xs-* 时，当我向下滚动时，内容与 panel-heading 重叠。当我删除 col-xs-* 和行标记时不会发生这种情况。

向下滚动之前：

向下滚动后：

源代码：

<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    <style>
  .navbar-collapse {
    background-color: #69899f;
    border-color: #425766;
  }

  .navbar-header {
    background-color: #69899f;
    border-color: #425766;
  }
  .navbar-collapse .navbar-text {
    color: #d7e2e9;
  }
  .navbar-header .navbar-toggle .icon-bar {
    background-color: #d7e2e9;
  }
        .affix {
            top: 0;
            width: 100%;
        }

        .affix+.container-fluid {
            padding-top: 70px;
        }
    </style>
</head>

<body>
 <div class="navbar fixed-top clearfix" style="border:1px solid #000;">
  <div class="navbar-header">
   <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
   </button>
   <h2 style="margin-top: 8px;margin-bottom: 8px;margin-right: 80px">Title A</h2>
  </div>
  <nav class="collapse navbar-collapse">
   <ul class="nav navbar-nav">
    <li class="active"><a href="#menu1">Title B</a></li>
   </ul>
  </nav><!--/.nav-collapse -->
    </div>
 
 <div class="container-fluid">
  <div class="tab-content clearfix">
   <div id="menu1" class="tab-pane fade in active">
    <h1 class="text-center">Title B</h1><br>
    <div class="container" id="niftarim">

  <div class="widget">
   <div class="panel panel-info">
   <div class="panel-heading"><p>Header</p></div>
   <div class="panel-body" style="word-wrap: break-word;">
    <div class="row">
     <div class="col-xs-3">
      <img src="http://placehold.it/40x140">
     </div>
     <div class="col-xs-9">
      <p>bla bla bla</p>
     </div>
    </div>
   </div>
   </div>
  </div>
  
  <div class="widget">
   <div class="panel panel-info">
   <div class="panel-heading"><p>Header</p></div>
   <div class="panel-body" style="word-wrap: break-word;">
    <div class="row">
     <div class="col-xs-3">
      <img src="http://placehold.it/40x140">
     </div>
     <div class="col-xs-9">
      <p>bla bla bla</p>
     </div>
    </div>
   </div>
   </div>
  </div>
  
  <div class="widget">
   <div class="panel panel-info">
   <div class="panel-heading"><p>Header</p></div>
   <div class="panel-body" style="word-wrap: break-word;">
    <div class="row">
     <div class="col-xs-3">
      <img src="http://placehold.it/40x140">
     </div>
     <div class="col-xs-9">
      <p>bla bla bla</p>
     </div>
    </div>
   </div>
   </div>
  </div>

  <div class="widget">
   <div class="panel panel-info">
   <div class="panel-heading"><p>Header</p></div>
   <div class="panel-body" style="word-wrap: break-word;">
    <div class="row">
     <div class="col-xs-3">
      <img src="http://placehold.it/40x140">
     </div>
     <div class="col-xs-9">
      <p>bla bla bla</p>
     </div>
    </div>
   </div>
   </div>
  </div>
    </div>
   </div>
  </div>
 </div>
    <script>
$(function() {
    $(".navbar").affix({
        offset: {
            top: $("header").outerHeight(true)
        }
    });
});
    </script>
</body>
</html>

Answer 1

导航的 z-index 有问题。即使只是给 .navbar 一个 1 的 z-index 也为我修复了重叠。 JSYK，数字越高，它在另一个元素下的可能性就越小，因此您可能应该将其设置为 999 之类的东西。请尝试使用这些样式。

<style>
   .navbar {
      z-index: 1;
    }
    .navbar-collapse {
      background-color: #69899f;
      border-color: #425766;
    }

    .navbar-header {
      background-color: #69899f;
      border-color: #425766;
    }
    .navbar-collapse .navbar-text {
      color: #d7e2e9;
    }
    .navbar-header .navbar-toggle .icon-bar {
      background-color: #d7e2e9;
    }
    .affix {
        top: 0;
        width: 100%;
    }

    .affix+.container-fluid {
        padding-top: 70px;
    }
</style>

使用 Twitter Bootstrap 3 的网格时，panel-body 与 navbar-header 重叠

When using Twitter Bootstrap 3's Grid, panel-body overlaps the navbar-header

javascript

html

css

twitter-bootstrap-3

bootstrap-grid