Question

由于某些原因，当我在面板主体内使用col-xs- *时，向下滚动时内容会与面板标题重叠。当我删除col-xs- *和行标记时，不会发生这种情况。

向下滚动之前：

panel with Bootstrap grid layouts

向下滚动后：

panel content hides the navbar-header

源代码：

<!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的z-index为1也可以解决我的重叠问题。 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的Grid时，面板主体与导航栏标题重叠

1 个答案: