Bootstrap单页网站themev格式化问题 [英] Bootstrap one page website themev formatting problems

问题描述

我的网站：zarwanhashem.com

我使用着陆页主题和滚动导航css，可以在这里找到：
http://startbootstrap.com/template-overviews/landing-page/
http://startbootstrap.com/template-overviews/scrolling-nav/

2问题：

1. 当我使用不同的页面导航栏的下一个页面从底部向上爬，因为我实际浏览的页面并未填满整个屏幕。如何才能让额外的空间充满背景色？




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

另外，还有一个随机错误，但两个部分之间有一个等号，我找不到原因。

我将不胜感激任何帮助。

这是我的一些代码。所有这一切都是在网站上公开的，所以如果你想看看它就可以看到。

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

$ b由于颜色问题，我现在拿走了50px填充。
$ b

 < div id =robotAIclass =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>一种用Java编程的面向对象机器人。它与其他学生在第三方创建的环境中创建的机器人
作斗争。我还创建了其他机器人
并相互测试以确定最佳策略。可以找到一个总结机器人智能
的工作原理的简短报告< a href =robotAIReporttarget =_ blank> here< / a>。< / p> 
< / div> 
< div class =col-lg-5 col-lg-offset-2 col-sm-6> 
< img class =img-responsivesrc =img / robotAI.pngalt => 
< / div> 
< / div> 
 
< / div> 
<！ -  /.container  - > 
 
< / div> 
  

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

 < div id =aboutclass =content-section-a> 
< div class =container> 
< div class =row> 
< h2 class =section-headingstyle =text-align：center>关于我< / h2> 
< p class =lead>我是一名喜欢编码的热情的学生。在高中时，我参加了3门计算机科学
课程，将我引入编程世界。我试着在自己的日程安排中花费自由时间
来编码，这样我就可以摆弄不同的语言和问题。我曾与图灵，Python和Java合作过。我对HTML和CSS也有基本的了解
。 
< br>< br> 
我的其他兴趣包括武术和巧克力。我在混合武术方面接受了10年的训练，目前
拥有二级黑带。我的训练重点是空手道，但我也曾与tae kwon do和jujutsu合作过。 
< br>< br> 
我目前正在从2015年5月至8月寻求软件开发实习/合作职位。您可以在我的< a href =LinkedIn> LinkedIn页面上找到关于我的更多信息
<一个>。< / p为H. 
< / 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-toprole =navigation> 
< div class =container> 
< div class =navbar-header page-scroll> 
< button type =buttonclass =navbar-toggledata-toggle =collapsedata-target =。navbar-ex1-collapse> 
< span class =sr-only>切换导航< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< / button> 
< a class =navbar-brand page-scrollhref =＃page-top> Zarwan Hashem< / a> 
< / div> 
 
 <！ - 收集导航链接，表单和其他内容以进行切换 - > 
< div class =collapse navbar-collapse navbar-ex1-collapse> 
< ul class =nav navbar-nav> 
 
 <！ - 隐藏的li包含当滚动过去关于区段时移除关于链接的活动类 - > 
< li class =hidden> 
< a class =page-scrollhref =＃page-top>< / a> 
< / li> 
< li>< a href =＃aboutclass =page-scroll>关于我< / a>< / li> 
< li class =dropdown> 
< a href =＃class =dropdown-toggledata-toggle =dropdown>项目< span class =caret>< / span>< / a> 
< ul class =dropdown-menurole =menu> 
< li>< a class =page-scrollhref =＃robotAI> Fighter Robot AI< / a>< / li> 
< li>< a class =page-scrollhref =＃spaceInvaders>太空侵略者< / a>< / li> 
< li>< a class =page-scrollhref =＃snake> Snake< / a>< / li> 
< / ul> 
< / li> 
< li> 
< a class =page-scrollhref =＃resume>继续< / a> 
< / li> 
< / ul> 
< a class =navbar-brand pull-right> [e-mail]< / a> 
< / div> 
<！ -  /.navbar-collapse  - > 
< / div> 
<！ -  /.container  - > 
< / nav> 
  

请注意，我实际上没有使用滚动导航代码中的部分。我只使用导航栏部分。另外，我对CSS和HTML非常陌生，所以请稍微解释一下你的解释。 解决方案

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

 < script type =text / javascript> 
 $（window）.ready（function（）{
 $（'div [class ^ =content-section]'）。css（'min-height'，$（window）.height （））; 
}）
< / script> 
  

如果您已经有jQuery，只需将此脚本添加到主体的底部即可。

至于第二个问题，那是因为您的导航栏设置为固定的，并且处理滚动的JavaScript会将div放在窗口顶部，以解决您必须更改编辑：修复滚动问题，您可以编辑文件scrolling-nav.js并更改它，或者只是增加每个部分的填充顶部。

顶部：

  //用于页面滚动功能的jQuery  - 需要jQuery缓动插件
 $（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（）; 
}）; 
 }）; 
  

My website: zarwanhashem.com

I'm using the landing-page theme and the scrolling-nav css, which can be found here: http://startbootstrap.com/template-overviews/landing-page/ http://startbootstrap.com/template-overviews/scrolling-nav/

2 problems:

1. When I navigate to different pages using the navbar the next "page" creeps up from the bottom because the page I actually navigated to doesn't fill up the entire screen. How can make it so that the extra space is just filled in with the background colour?

2. When I navigate to different sections the scrolling stops too late. As in, the spacing between the images and the navbar is non-existent. There should be 50px padding there to make a space equal to the size of the navbar. I tried adding padding to the divs but the padding goes into the previous section, which has a different background colour, so it doesn't fit in properly.

Also, a random bug, but there's an equal sign between two of the sections and I can't find out why.

I would appreciate any help.

Here's some of my code. All of it is public on the website so it's visible if you want to look at it. I took away the 50px padding now because of the colour issue.

Code for the robot section (The other project sections have the same structure):

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

Code for the about section (The resume section has almost the same structure):

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

These are the only changes I've made to landing-page css (Not sure if these actually are changes, I might've reverted them back to what they were originally):

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

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

Navigation bar code:

<!-- 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">[e-mail]</a>
            </div>
            <!-- /.navbar-collapse -->
        </div>
        <!-- /.container -->
    </nav>

Note that I'm not actually using the sections in the scrolling-nav code. I'm only using the navbar section. Also I'm very new to CSS and HTML so please dumb down your explanations a little.

解决方案

if you want to make each section fill up the whole space you will have a problem that each user have different screen height, I don't know if there is a way to do it with css but I have this solution using jQuery:

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

if you already have jQuery just add this script to the bottom of the body.

as for the second problem you that's because your navigation bar is set to fixed, and the javascript handling the scrolling put the div at the top of the window, to fix that you either have to change the javascript handling the scrolling or just increase the padding-top for each section.

edit: to fix the scrolling problem you can edit the file scrolling-nav.js and change the click event handler by subtracting 50 form the offset().top:

//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();
});
});

这篇关于Bootstrap单页网站themev格式化问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！