引导程序图像粘贴到屏幕顶部

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

navbar-fixed-top类所具有的position:fixed会使nav元素位于页面上的所有内容之上(考虑3D效果)。所以图像发生了什么，它坐在它认为是页面顶部的地方，导航栏在顶部。

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

这是一个带有示例的Codepen。

Answer 2

navbar-fixed-top的css使用绝对定位把它放在所有东西的最上面，在css中使用绝对定位不会把其他容器推到它下面，它只是把自己放在它们上面。

如果你想将下一个div向下移动，你可以在知道的情况下添加等于导航栏高度的填充或边距，或者使用相对定位而不是绝对定位。

查看此引导程序示例的检查可能会帮助您理解https://getbootstrap.com/docs/3.3/examples/navbar-fixed-top/。请注意，固定顶部示例中的body标记具有顶部填充。静态顶部示例body没有填充顶部，因为导航栏是使用相对定位而不是绝对定位放置的。

Answer 3

我认为您需要在nav元素中设置类，如下所示：

<nav class="navbar navbar-default navbar-fixed-top">

并添加以下CSS

body { padding-top: 70px; }

(根据文档：https://getbootstrap.com/docs/3.3/components/#navbar-fixed-top)

请看下面的demo：

​

.body {
  padding-top: 70px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />


<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <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>
</nav>
<!--    end navigation  -->

<div class="container-fluid">
  <div class="row">
    <div class="col-md-4">
      <img src="https://dummyimage.com/600x400/000/fff" />
    </div>
  </div>
</div>

​