为什么会出现这种差异?
问题描述:
我想在引导程序中使div看起来像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代码?
编辑: 这是我希望的结果: https://jsfiddle.net/d6wunt0L/
答
在你的第二个情况下,渲染divBlue
后你有渲染divGrey
重叠的divBlue
,所以展现divBlue
你需要申请z-index:1
为divBlue
而在第一种情况下,您在greyDiv
之后呈现blueDiv
,因此您在此处找不到任何问题。
<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>
+0
谢谢,pawan库马尔 – touchingtwist
答
试试这个:
<div class="container-fluid">
<div id="divGray">
<div class="col-lg-6" style="background-color: #cccccc; height: 4000px;"></div>
</div>
<div id="divBlue">
<div class="col-lg-6" style="background-color: #003366; height: 100px; bottom: 0px;"></div>
</div>
</div>
你能提供引导导航栏的截图,也使用类似的jsfiddle,这样我们就可以运行,看到的问题。如果你这样做,它会帮助其他人及时给你答案。 – JGFMK