Question

我在滚动页面时遇到错误，正文内容与导航栏重叠。

我在导航栏上有内容，滚动时会消失，工作正常。
虽然应该修复滚动导航栏，但这样可以正常工作。
问题是在滚动时，正文内容在导航栏上滑动。它应该从导航栏后面开始。
我在导航栏下方有一个图片滑块

以下是HTML文件的代码：

<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
        <div class="row">
            <div class="col-sm-4" style="background-color:yellow; width:200px">
                <img class="img-responsive img-rounded pull-left" src="img/logo 1.png" alt="Chania" width="200" height="200">
            </div>
            <div class="col-sm-4" style="background-color:pink;">
                <h3>Fixed (sticky) navbar on scroll</h3>
                <p>Scroll this page to see how the navbar behaves with data-spy="affix".</p>
                <p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels.</p>
            </div>
            <div class="col-sm-4 text-right" style="background-color:yellow;width:200px;">
                <img class="img-responsive img-rounded pull-right" src="img/logo 2.png" alt="Chania" width="200" height="200">
            </div>
        </div>
    </div>

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="container-fluid">
            <div class="navbar-header">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                        <span class="sr-only">Menu</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    menu name..
                </ul>
                <form class="navbar-form navbar-right" role="search">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
                </form>
            </div>
        </div>
    </nav>

导航栏的CSS代码：

.affix {
top: 0;
width: 100%; }

.affix + .container-fluid {
padding-top: 70px; }

Slider的CSS代码

html, body {
height: 100%;}

.carousel, .item {
height: 70%; }

.carousel-inner {
height: 143%; }

.fill {
width: 100%;
height: 100%;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover; }

我是bootstrap的初学者。感谢。

Answer 1

你应该把它放在一个小提琴中，但我会猜测你的导航栏应该包含// When initializing: persistentContainer.viewContext.automaticallyMergesChangesFromParent = true persistentContainer.viewContext.mergePolicy = NSMergePolicy.mergeByPropertyStoreTrump // And when saving: persistentContainer.performBackgroundTask { moc in moc.automaticallyMergesChangesFromParent = true moc.mergePolicy = NSMergePolicy.mergeByPropertyObjectTrump autoreleasepool { // ... do some nsmanagedobject loading/changing } do { try moc.save() } catch {} }和position:absolute;

Answer 2

看到这个查询我已经为你做了jsfiddle只是检查它..你正在使用词缀修复导航栏。

所以在css中添加以下内容：

    .affix{
width:100%;
top:0px;
}

并检查导航栏的z-index，保持nabvar的高值，如z-index：9999;

JSfiddle link

所有编码看起来都不错，没问题。请检查我的小提琴

Answer 3

在主容器中添加margin-top:30px;即可满足您的要求。

滚动时正文内容重叠导航栏

3 个答案: