Bootstrap 一页网站主题格式问题

Question

我的网站：zarwanhashem.com

我正在使用登录页面主题和滚动导航 css，可以在此处找到： http://startbootstrap.com/template-overviews/landing-page/ http://startbootstrap.com/template-overviews/scrolling-nav/

2 个问题：

1. 当我使用导航栏导航到不同的页面时，下一个“页面”会从底部向上爬，因为我实际导航到的页面并没有填满整个屏幕。怎样才能让多余的空间只用背景色填充？

2. 当我导航到不同的部分时，滚动停止得太晚了。如中，图像和导航栏之间的间距是不存在的。那里应该有 50px 的填充以使空间等于导航栏的大小。我尝试在 div 中添加填充，但填充进入了上一部分，该部分具有不同的背景颜色，因此不适合。

另外，一个随机错误，但两个部分之间有一个等号，我不知道为什么。

我将不胜感激。

这是我的一些代码。所有这些都在网站上公开，因此如果您想查看它是可见的。由于颜色问题，我现在去掉了 50px 的填充。

机器人部分代码（其他项目部分结构相同）：

<div id="robotAI" class="content-section-b">
        <div class="container">
            <div class="row">
                <div class="col-lg-5 col-sm-6">
                    <hr class="section-heading-spacer">
                    <div class="clearfix"></div>
                    <h2 class="section-heading">Fighter Robot AI</h2>
                    <p class="lead">An object oriented robot programmed in Java. It fought robots
                                    created by other students in an environment created by a third party. I also created other robots 
                                    and tested them against each other to determine the best strategy. A brief report summarizing how the robot's intelligence
                                    works can be found <a href="robotAIReport" target="_blank">here</a>.</p>
                </div>
                <div class="col-lg-5 col-lg-offset-2 col-sm-6">
                    <img class="img-responsive" src="img/robotAI.png" alt="">
                </div>
            </div>

        </div>
        <!-- /.container -->

    </div>

about 部分的代码（resume 部分的结构几乎相同）：

<div id="about" class="content-section-a">
        <div class="container">
            <div class="row">
                    <h2 class="section-heading" style="text-align:center">About Me</h2>
                    <p class="lead">I'm a passionate student who loves coding. In high school I took 3 computer science
                                    courses, which introduced me to the world of programming. I try to make free time
                                    in my schedule for coding so that I can fiddle around with different languages and problems. I've worked with Turing, Python, and Java. I also have a basic understanding
                                    of HTML and CSS.
                                    <br><br>
                                    My other interests include martial arts and chocolate. I trained in mixed martial arts for 10 years, and currently
                                    hold a 2nd degree black belt. The focus of my training was karate, but I also worked with tae kwon do and jujutsu.
                                    <br><br>
                                    I am currently seeking a software development internship/co-op position from May-August 2015. You can find more information
                                    about me on my <a href="LinkedIn">LinkedIn page</a>.</p>           
            </div>

        </div>
        <!-- /.container -->

    </div>

这些是我对着陆页 css 所做的唯一更改（不确定这些是否真的是更改，我可能已经将它们恢复到原来的样子）：

.content-section-a {
    background-color: #f8f8f8;
}

.content-section-b {
    border-top: 1px solid #e7e7e7;
    border-bottom: 1px solid #e7e7e7;
}

导航条码：

<!-- Navigation -->
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container">
            <div class="navbar-header page-scroll">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand page-scroll" href="#page-top">Zarwan Hashem</a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse navbar-ex1-collapse">
                <ul class="nav navbar-nav">

                    <!-- Hidden li included to remove active class from about link when scrolled up past about section -->
                    <li class="hidden">
                        <a class="page-scroll" href="#page-top"></a>
                    </li>
                    <li><a href="#about" class="page-scroll">About Me</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Projects <span class="caret"></span></a>
                    <ul class="dropdown-menu" role="menu">
                        <li><a class = "page-scroll" href="#robotAI">Fighter Robot AI</a></li>
                        <li><a class = "page-scroll" href="#spaceInvaders">Space Invaders</a></li>
                        <li><a class = "page-scroll" href="#snake">Snake</a></li>
                    </ul>
                    </li>
                    <li>
                        <a class="page-scroll" href="#resume">Resume</a>
                    </li>
                </ul>
                <a class="navbar-brand pull-right">zarwan@zarwanhashem.com</a>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

请注意，我实际上并没有使用滚动导航代码中的部分。我只使用导航栏部分。另外，我对 CSS 和 HTML 还很陌生，所以请把你的解释简单一点。

Answer 1

如果你想让每个部分填满整个空间，你会遇到每个用户都有不同的屏幕高度的问题，我不知道是否有办法用 css 做到这一点，但我有这个使用 jQuery 的解决方案：

<script type="text/javascript">
$(window).ready(function(){
    $('div[class^="content-section"]').css('min-height', $(window).height());
})
</script>

如果您已经有 jQuery，只需将此脚本添加到正文的底部。

至于您的第二个问题，因为您的导航栏设置为固定，并且处理滚动的 javascript 将 div 放在窗口的顶部，以解决您必须更改处理滚动的 javascript 或只是增加每个部分的 padding-top。

编辑：要解决滚动问题，您可以编辑文件 scrolling-nav.js 并通过从 offset().top 中减去 50 来更改点击事件处理程序：

//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
    var $anchor = $(this);
    $('html, body').stop().animate({
        scrollTop: $($anchor.attr('href')).offset().top - 50
    }, 1500, 'easeInOutExpo');
    event.preventDefault();
});
});