gpt4 book ai didi

html - 如何防止在 Bootstrap 中覆盖 div

转载 作者:太空宇宙 更新时间:2023-11-04 11:24:23 28 4
gpt4 key购买 nike

我有两个固定的行。第一行有一个图像,第二行有一个菜单栏。当我试图在这两个固定行下方添加下一行(将包含另一个图像文件)时,图像文件会覆盖到第一行(固定行)。有人请帮助我!谢谢。

<!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/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com