html - Bootstrap 图像卡在屏幕顶部

Question

对于一个类，我必须创建一个网站，该网站在导航栏正下方有一张图片，但由于某种我无法弄清楚的原因，图片显示在导航栏内而不是下方。有人可以解释为什么会发生这种情况以及如何解决吗？谢谢

<div class="row">
 <nav class="navbar-fixed-top">
   <div class="container-fluid">
    <div class="navbar-header">
    <ul class="nav navbar-nav" id="mainNav">
        <li><a href="###">Locations</a></li>
        <li><a href="###">Special Events</a></li>
        <li><a href="###">Breakfast</a></li>
        <li><a href="###">Lunch</a></li>
        <li><a href="###" class="active">Liam's Food Fusion</a></li>
        <li><a href="###">Dinner</a></li>
        <li><a href="###">Apps and Extras</a></li>
        <li><a href="###">Online Ordering</a></li>
        <li><a href="###">Contact Us</a></li>

    </ul>
  </div>
    </div>
</nav>
  </div>
 <!--    end navigation  -->
 <div class="row">
  <div class="container-fluid">
   <div class="col-md-4" id="logopic">
    <img src="images/food fusion logo.png" />
</div>
</div>
</div>

Answer 1

position:fixed那一个类navbar-fixed-top导致导航元素位于页面上的所有内容上方(想想 3D)。所以图像发生的事情是它位于它认为是页面顶部的位置，导航栏在顶部。

几乎可以删除 .navbar-fixed-top从 nav 元素进行分类，或在导航栏后面的内容周围的 div 中添加边距顶部(在本例中为 <div class="row"> 。

这是一个 Codepen举个例子。