Question

EDIT2： 好的，问题是，我在<div class="row">标记周围使用了<div class="topimage">。奇怪。有人可以解释它为什么吗？

我很擅长引导并创建一个用于学习目的的网页。到目前为止，一切都运行良好，除了导航栏。

这是我的导航代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<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"/>
<div id="headertest ">
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="row">
                <div class="col-sm-4  col-sm-offset-1">
                    <form class="navbar-form navbar-left">
                        <button class="btn btn-default">ENTDECKEN</button>
                        <button class="btn btn-default">FINDEN</button>
                        <button class="btn btn-default">PLANEN</button>
                        <p class="font">
                            <b> Zurück zur Hafenseite |</b> <a style="text-decoration: none">Salsbury & Mysteriöses Stonehenge</a>
                        </p>
                    </form>
                </div>
                <div class="col-sm-2 ">
                    <div class="navbar-form">
                        <img src="../assets/aida.png" class="logo ">
                    </div>
                </div>
                <div class="col-sm-4">
                    <div class="navbar-form navbar-right">
                        <form action="#" style>
                            <div class="dropdown">
                                <img src="../assets/lupe.png" class="icons" />
                                <img src="../assets/telefon.png" class="icons" />
                                <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                                    Dropdown
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                                    <li><a href="#">Erste Aktion</a></li>
                                    <li><a href="#">Zweite Aktion</a></li>
                                    <li><a href="#">Noch eine Aktion</a></li>
                                    <li role="separator" class="divider"></li>
                                    <li><a href="#">Ein Link</a></li>
                                </ul>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </nav>
</div>

问题是，如果我使用navbar-fixed-top类，当我滚动时，导航栏内的内容会跳跃。就像我向上滚动时上边距消失一样，如果我向上滚动，边距（或任何问题）只是神奇地回来了。

正常并向上滚动：

向下滚动：

我希望你能明白我的意思。

有人知道我做错了什么吗？（我的css类不应该是问题。如果我删除它们，内容仍然保持“跳跃”）

谢谢

修改

我有一个图像作为导致问题的第一个项目（在导航栏之后）。如果我删除它，导航栏就会按预期工作。

的CSS：

.topimage{
  height: 600px;
  width: 100%;
  align-self: center;
  background-image: url("./assets/testbild3.jpg"); 
  background-repeat: no-repeat;
  background-size: cover;
  z-index: -1;

}

以及我如何实施它：

<div class="row">
   <headertest></headertest><!-- navbar component -->
</div>
<div class="row ">
   <div class="topimage">
   </div>
</div>

小提琴链接:(在没有“跳跃”导航栏内容的情况下工作） https://jsfiddle.net/Biberium/g52cd6v8/

在bootstrap中导航栏中的“跳跃”内容

0 个答案: