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的CSS使用绝对定位将其放置在其他所有内容的顶部。在CSS中使用绝对定位不会将其他容器推到其下方，而只是将自身定位在它们上方。

如果您想将下一个div向下移动，则可以向其添加等于导航栏高度的填充或边距，或者使用相对位置而不是绝对位置。

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

Answer 2

我认为您需要像这样在nav元素中设置类：

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

并添加以下CSS

body { padding-top: 70px; }

（每个文档：https://getbootstrap.com/docs/3.3/components/#navbar-fixed-top）

请参见下面的演示

.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>

Answer 3

由于导航栏使用的是“ navbar-fixed-top”类，因此它是固定的，因此不会影响其他元素的放置。您应该做的是在图像或其容器之一的顶部添加边距。另外，我可以肯定地说，您不需要导航栏的外面，这可能会弄乱某些内容。

Answer 4

类position:fixed具有的navbar-fixed-top导致nav元素位于页面上所有内容的上方（认为是3D）。因此，图片发生的事情是它位于页面顶部，导航栏位于顶部。

几乎可以从导航元素中删除.navbar-fixed-top类，或在导航栏后面的内容周围的div上添加一个边距顶部（在这种情况下为<div class="row">。

这里有一个Codepen和示例。

引导程序映像粘贴在屏幕顶部

4 个答案: