我想让 div 在 Bootstrap 中看起来像 navbar
。
我做了两个div,并以两种方式搭配。
首先,我先找到 divOneGray,然后找到 divTwoBlue,
<div class="container-fluid">
<div class="row" id="divGray">
<div class="col-lg-8 col-lg-offset-2" style="background-color: #cccccc; height: 4000px;"></div>
</div>
<div class="row" id="divBlue">
<div class="col-lg-8 col-lg-offset-2" style="background-color: #003366; height: 100px; position: fixed; bottom: 0px;"></div>
</div>
</div>
在这种情况下,divBlue
出现在divGray
之上,
但是第二种情况,
<div class="container-fluid">
<div class="row" id="divBlue">
<div class="col-lg-8 col-lg-offset-2" style="background-color: #003366; height: 100px; position: fixed; bottom: 0px;"></div>
</div>
<div class="row" id="divGray">
<div class="col-lg-8 col-lg-offset-2" style="background-color: #cccccc; height: 4000px;"></div>
</div>
</div>
divGray
出现在 divBlue
之上。
为什么会这样?
在不配置html代码的情况下,像First case需要做些什么?
编辑: 这是我希望的结果: https://jsfiddle.net/d6wunt0L/
最佳答案
在第二种情况下,在渲染 divBlue
之后,您渲染了与 divBlue
重叠的 divGrey
,因此要显示 divBlue
您需要为 divBlue
应用 z-index:1
而在第一种情况下,您正在渲染 blueDiv
在 greyDiv
之后,所以你在这里找不到任何问题。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row" id="divBlue">
<div class="col-lg-8 col-lg-offset-2" style="background-color: #003366; height: 100px; position: fixed; bottom: 0px;z-index:1;"></div>
</div>
<div class="row" id="divGray">
<div class="col-lg-8 col-lg-offset-2" style="background-color: #cccccc; height: 4000px;"></div>
</div>
</div>
关于html - 为什么会出现这种差异?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45127008/