我有两个固定的行。第一行有一个图像，第二行有一个菜单栏。当我试图在这两个固定行下方添加下一行(将包含另一个图像文件)时，图像文件会覆盖到第一行(固定行)。有人请帮助我! 谢谢。
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top" style="width:100%">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<img class="img-responsive" src="images/logo.png"></div>
</div>
<div class="row" >
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<ul class="nav nav-tabs navbar-inverse">
<li style="margin-right:15px"><a href="home.html">Home</a></li>
<li style="margin-right:15px"><a href="aims.html">Our AIMS</a></li>
<li style="margin-right:15px"><a href="mission.html">Mission</a></li>
</ul>
</div>
</div>
</nav>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<img class="img-responsive" src="images/sideImg.jpg" alt="save humanity">
</div>
</div>
</div>
</body>
</html>
最佳答案
由于前两行的容器是固定的，所以不在文档的正常流动范围内。您需要将 padding-top 添加到第三个 div/行，即 > 前两行/容器的高度。
HTML
<div class="third-row"> <!-- Add custom div wrapping the container -->
<div class="container">
CSS
.third-row {
padding-top: 150px;
}
输出:
.third-row {
padding-top: 150px;
}<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-default navbar-fixed-top" style="width:100%">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<img class="img-responsive" src="http://placehold.it/100x100">
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<ul class="nav nav-tabs navbar-inverse">
<li style="margin-right:15px"><a href="home.html">Home</a>
</li>
<li style="margin-right:15px"><a href="aims.html">Our AIMS</a>
</li>
<li style="margin-right:15px"><a href="mission.html">Mission</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<div class="third-row">
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<img class="img-responsive" src="http://placehold.it/1200x300" alt="save humanity">
</div>
</div>
</div>
</div>
</body>
</html>关于html - 如何防止在 Bootstrap 中覆盖 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32515925/