Question

我一直在使用bootstrap3和Jekyll来改进网站。我为_include文件夹创建了一个header.html文件，该文件将包含在页面中，以提供下方的jumbotron和navbar。这是指向整个文件夹副本的链接，以防我在此处省略任何内容，并且索引页面应加载到其他人的浏览器中，这些浏览器可能会遇到或可能不会遇到我的问题：https://www.dropbox.com/sh/bv59k92zjt142vp/F62a6bxeCJ

我的问题是，如果我在我的浏览器中将local.html加载到localhost 4000（Jekyll服务器设置为监视模式），header.html和我的index.html内容中的所有内容都会正确显示，但是当我滚动时，有时候当导航栏固定到顶部时，其下方页面的内容继续在其上滚动并与栏重叠，有时则不会。此外，如果我在内容与导航栏不重叠时将鼠标悬停在索引页面内容中的按钮上，则当鼠标悬停在导航栏上时，它会与导航栏重叠并保持在那里。

我很难理解为什么会这样。除了文件夹的链接之外，我还提供了我的header.html代码和css。

您可以看到标题有一个带有词缀行为的导航栏：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>{{ page.title }}</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="{{ site.description }}">
        <link href="/css/bootstrap.css" rel="stylesheet">
        <link href="/css/bootstrap-responsive.css" rel="stylesheet">
        <link rel="stylesheet" href="css/custom.css" type="text/css"/>
        <style>
        </style>
        <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
        <script src="js/bootstrap.js"></script>
        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></sc\
    ript>
        <![endif]-->
    </head>
    <body>
        <!-- First we begin the main container that contains all content, this is closed in the footer.html file right at the end -->
        <div class="container-fluid main"> 
            <!-- Start of JumboTron -->
            <div class="jumbotron">
                <div class="row">
                    <div class="col-lg-4">
                        <img src="{{ page.headimage }}" class="img-rounded">
                    </div>
                    <div class="col-lg-8">
                        <div class="page-header">
                            <h2> {{ page.title }} </h2>
                            <p> <h2> <small> {{ page.subtitle }} </small> </h2> </p>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End of JumboTron -->
            <!-- Start of the Navigation Bar, this is supposed to have sticky behaviour -->
            <div class="row-fluid">
                <div id="menubar" class="navbar navbar-inverse affix-top" data-spy="affix" data-offset-top="280">
                    <div class="navbar-header">
                        <a class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </a>
                        <a class="navbar-brand" href="https://github.com/Ward9250/HybRIDS">HybRIDS</a>
                    </div>
                    <div class="navbar-collapse collapse">
                        <ul class="nav navbar-nav">
                            <li><a href="./index.html">Home</a></li>
                            <li><a href="./about.html">About HybRIDS</a></li>
                            <li><a href="#">Getting Started</a></li>
                            <li><a href="#">Quick Start</a></li>
                            <li><a href="#">Full Documentation</a></li>
                            <li><a href="./contact.html">Contact</a></li>
                            <li class="dropdown">
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown">Download<b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="https://github.com/Ward9250/HybRIDS">GitHub Repository</a></li>
                                    <li><a href="#">Download TAR</a></li>
                                    <li><a href="https://github.com/Ward9250/HybRIDS/archive/master.zip">Download ZIP</a></li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                </div>  
            </div>
            <!-- End of the navbar, it stretches across the screen like the jumbotron does and lies immediately below it -->
            <!-- Now we open up the container that holds all the other content in the webpage that lies underneath this standard header -->     
            <div class="container">

导航栏应该贴在顶部。索引页面的相应相关CSS在我的custom.css文件中定义：

/* Set the page's background colour */
body {
    background-color: #333333;
    padding-bottom: 100px;
}

/* Alter class for navbar to give format and special behaviour */
.navbar {
    position: sticky;
}

.container-fluid .main{
    margin-left: 0px;
    margin-right: 0px;
    margin-top: 0px;
    margin-bottom: 0px;
}

/* For making paragraphs white in font */
.whitep {
    color: white;
}

.jumbotron {
    margin-bottom: 0px;
    background-image: url(../img/carouelbackground.jpg);
    background-position: 0% 25%;
    background-size: cover;
    background-repeat: no-repeat;
    color: white;
    text-shadow: black 0.3em 0.3em 0.3em;
}

/* Styling for the side menubar and affixed navbar for the pages */
#menubar.affix {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
}

Answer 1

尝试在下一个_includes /文件中移动<div class="container">，而不是将其保留在标题中。

在bootstrap 3中粘贴导航栏的奇怪行为

1 个答案: