为什么会出现这种差异？

我想在引导程序中使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/

来源

2017-07-16 touchingtwist

你能提供引导导航栏的截图，也使用类似的jsfiddle，这样我们就可以运行，看到的问题。如果你这样做，它会帮助其他人及时给你答案。 – JGFMK

在你的第二个情况下，渲染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>

来源

2017-07-16 09:34:59

谢谢，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>

来源

2017-07-16 09:40:18 Mudasir

为什么会出现这种差异？

回答

相关问题