好吧，我做到了。首先
<nav id="resume-nav" class="sidebar-nav">
<ul id="resume-nav" class="nav nav-list">
你有你的導航和你的UL相同的ID。從你的ul中刪除它。 其次嘗試把
padding-top:30px;
要將部分中的每一個（只需添加一個類，只是爲了給他們之間的一些空間）。 最後和最重要刪除
data-offset="0"
從您的身體標記。默認值是10，填充30px會給它一定的空間，所以當你選擇一個部分時，它會把你帶到一個屬於你選擇的部分的空間。也許另一個價值會更好，只是玩它，直到你有你想要的。但總的來說，這是什麼導致你的問題。
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Joshua Bock's Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="Joshua Bock, Portfolio, Web Design, Front End Developer, Web Developer">
<meta name="description" content="Joshua Bock's Portfolio websites">
<link rel="icon"
type="image/png"
href="public/img/favicon.png">
<link href="public/css/main.css" rel="stylesheet">
<link href="public/css/media-queries.css" rel="stylesheet">
<!--TypeKit-->
<script type="text/javascript" src="http://use.typekit.net/qdb5vrk.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<!--HTML5 shim, for IE6-8 support of HTML5 elements-->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="public/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="public/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="public/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="public/ico/apple-touch-icon-57-precomposed.png">
</head>
<body id="myStyle" data-spy="scroll" data-target="#resume-nav" data-offset="10">
<div class="container-fluid">
<div class="logo hidden-phone">
<img src="public/img/joshuabocklogo.png" alt="Joshua Bock Logo">
</div>
<header class="navbar">
<div class="navbar-inner">
<div class="container-fluid hdBody">
<a class="btn btn-navbar" 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="brand" href="#">
<h1>Joshua Bock</h1>
<strong>Website Designer & Web Developer</strong>
</a>
<nav class="nav-collapse collapse">
<ul class="nav">
<li><a href="index.html" class="button">Home</a></li>
<li><a href="#" class="button">Mobile Apps</a></li>
<li><a href="websites.html" class="button">Websites</a></li>
<li><a href="#" class="button">Game Jam's</a></li>
<li><a href="3dwork.html" class="button">3d Work</a></li>
<li class="active"><a href="#" class="button btn-active">Resume</a></li>
</ul>
</nav>
</div>
</div>
</header>
</div>
<div class="container-fluid bd">
<div class="row-fluid">
<aside class="span3 well affix" data-spy="affix">
<nav id="resume-nav" class="sidebar-nav">
<ul class="nav nav-list">
<li class="nav-header">Resume</li>
<li class=""><a href="#resume-skills">Skillsets</a></li>
<li class=""><a href="#professional-experience">Professional Experience</a></li>
<li class=""><a href="#projects">Projects</a></li>
<li class=""><a href="#education">Education</a></li>
</ul>
</nav>
</aside>
<article id="resumeBd" class="well span9">
<section id="resume-skills" class="clearfix">
<h3>Skillsets</h3>
<ul class="unstyled">
<li><h4>Professional Skills</h4></li>
<li>3d Modeling & Texturing</li>
<li>World Builder</li>
<li>Graphic Design</li>
<li>Web Design & Development</li>
<li>Customer Service</li>
<li>Help Desk/Technology Support</li>
<li>Programming</li>
</ul>
<ul class="unstyled">
<li><h4>Web Technologies</h4></li>
<li>HTML5</li>
<li>CSS3</li>
<li>Javascript</li>
<li>Actionscript 3.0</li>
<li>Jquery</li>
<li>Jquery UI</li>
<li>Twitter Bootstrap</li>
<li>Yahoo YUI</li>
<li>Zend Framework</li>
</ul>
<ul class="unstyled">
<li><h4>Software Proficiency</h4></li>
<li>Adobe Photoshop CS6</li>
<li>Adobe Flash CS6</li>
<li>Adobe Dreamweaver CS6</li>
<li>Adobe Illustrator CS6</li>
<li>Adobe After Effects CS6</li>
<li>Adobe InDesign CS6</li>
<li>Autodesk 3d Studio Max 2012</li>
<li>Autodesk Maya 2012</li>
<li>Pixologic Zbrush 4</li>
<li>Unreal Editor 3</li>
<li>Valve Source SDK</li>
<li>Unity</li>
<li>Zend Studio 9</li>
</ul>
</section>
<section id="professional-experience" class="clearfix">
<h3>Professional Experience</h3>
<p><strong>Software Developer III</strong> (April 2013 - Present), <strong>Northrop Grumman, CJMTK</strong></p>
<p>As a Software Developer I am developing a new public facing website.</p>
<p><strong>Software Developer III</strong> (December 2012 - Present), <strong>Northrop Grumman, under contract to the Defense Systems Group</strong></p>
<p>As a Software Developer I am working on creating a uniformed look and feel for various widgets to be used by the U.S. Army.</p>
<ul>
<li>Developing a uniformed style for various widgets</li>
<li>Developing a widget using the MVC model, HTML5, Bootstrap, Jquery, Dojo, Ozone Common Framework, and ArcGIS</li>
<li>Designing and Developing various HTML5 wireframes based off current widgets</li>
</ul>
<p><strong>Front-End Developer</strong> (November 2012 - December 2012), <strong>Northrop Grumman, Internal Research and Development</strong></p>
<p>As a Front-End Developer I worked on creating wireframes and style guides. These wireframes were built using Adobe Proto, Twitter Bootstrap, and Jquery.</p>
<ul>
<li>Designed & Developed layout wireframes</li>
<li>Developed page layouts</li>
<li>Designed various Logo compositions</li>
</ul>
<p><strong>Multimedia Designer III</strong> (September 2011-November 2012), <strong>Northrop Grumman, under contract to the Intelligence Community </strong></p>
<p>As a Multimedia Designer I worked on classified projects, using Zend Studio 9, Adobe Photoshop, Adobe Illustrator, and Adobe After Effects to design websites that are cross-browser compatible and comply with the usability, accessibility standards set by the World Wide Web Consortium. These websites where built using frameworks such as, Yahoo YUI 2.0, Joomla, WordPress, and Zend Frameworks.</p>
<ul>
<li>Provided design considerations and inputs during initial products requirements meetings.</li>
<li>Provided multiple design options highlighting elements that meet customers’ goals.</li>
<li>Efficiently transferred product requirements into a working viewable product.</li>
<li>Successfully deployed multiple product releases days ahead of scheduled release.</li>
<li>Established working rapport with customers to develop their product vision.</li>
<li>Posed relevant questions driving towards solutions to design problems during product development.</li>
<li>Created and maintained descriptive documentation for hours spent on tasks.</li>
<li>Provided regular milestone samples of products, highlighting design issues.</li>
</ul>
<p><strong>Graphics Artist</strong> (February 2011- April 2011), <strong>DUA Computer Resources, under contract to Lockheed-Martin within the Intelligence Community</strong></p>
<p>As a member of a six-person Office of Corporate Communications graphics team working on both classified and unclassified projects, I used Adobe InDesign to design media products such as posters, brochures, retirement ceremony programs, event advertisements for plasma displays, web images, newsletters, logos, and publications. I consulted with clients throughout the Intelligence Community on their project requirements and design ideas. I worked on 42 projects. Significant projects included:</p>
<ul>
<li>Designed three graphics for the celebration of the Army’s birthday, creating a unified design for posters, web graphics, and plasma displays.</li>
<li>Designed a new event logo for a Support Team Conference to be used to advertise the event.</li>
<li>Designed a new Seal/Logo for the Office of the Inspector General.</li>
<li>Designed a poster collage to be given to members of the Deployment team.</li>
</ul>
<p><strong>CSR/ ITO Svc Delivery Rep III - NMCI Field Services - Help Desk</strong> (2009- February 2011), <strong>PSI Pax, Inc under contract to HP Enterprise Services/ HP Enterprise Services on the Navy Marine Corps Intranet (NMCI) contact– Dahlgren, VA</strong></p>
<ul>
<li>Provided exceptional technical support for the computer NMCI customer, resolving tickets within the required NMCI timeframe of 14 days. Followed up with customers to make sure the issues were fully resolved.</li>
<li>Commended for giving exceptional customer service.</li>
<li>Improved workflow to increase my productivity and took on additional tasks to improve my skills.</li>
<li>Placed orders for replacement parts and installed the parts.</li>
<li>Successfully completed the HP and Dell Workstation and Laptop certifications.</li>
</ul>
<p><strong>Graphic Specialist II</strong> (October 2007- June 2009), <strong>Logistic Services International, under contract to L-3 Communications – D.P. Associates Inc. working for the U.S. Marine Corps on interactive courseware for KC-130J maintenance personnel – Havelock, NC</strong></p>
<ul>
<li>Synthesized highly complex and diverse information from subject matter experts into graphics to be used in lessons.</li>
<li>Received Quality Assurance Award recognition for producing high-quality graphics and an outstanding work ethic.</li>
<li>Collaborated with other team members to design effective workflows and procedures to decrease production time and decrease the amount of rework.</li>
<li>Helped other team members with graphic issues.</li>
</ul>
<p><strong>System Administrator/ Cage – Student Equipment Checkout Facility</strong> (September 2004- June 2007) <strong>Savannah College of Art & Design, Federal Work Study Program – Savannah, GA</strong>
<ul>
<li>Checked out/in equipment for student use for student projects.</li>
<li>Ensured equipment was in working order and responded to customer trouble tickets.</li>
</ul>
<p><strong>Information Technology Specialist</strong> (2002 to December 2006), <strong>College of Southern Maryland – La Plata & Leonardtown, MD</strong></p>
<ul>
<li>Set up AV equipment for classes and presentations. Set up a distance learning connection. Responded to customer tickets.</li>
<li>Created standard Software Loads (Images) into different pre-defined configurations (admin/lab/library, as well as classroom-specific), then updated them to further accommodate user needs by installing appropriate software.</li>
</ul>
</section>
<section id="projects" class="clearfix">
<h3>Projects</h3>
<p><strong>Front-End Developer</strong> (January 2013- Feburary 2013) <strong>Techzoku</strong></p>
<ul>
<li>Worked on creating a live tile 'tags' section</li>
</ul>
<p><strong>Modeler, & Level Designer</strong> (January 2012- January 2012) <strong>International Game Developers Assoication - Game Jam 2012 - Susie's Summer Home</strong></p>
<ul>
<li>Modeled and Textured Rooms</li>
<li>Modeled and Textured Grandfather Clocks</li>
<li>Placement of objects in rooms</li>
</ul>
<p><strong>Modeler, & Level Designer</strong> (January 2011- January 2011) <strong>International Game Developers Assoication - Game Jam 2011 - Space Exodus</strong></p>
<ul>
<li>Modeled the Spaceship</li>
<li>Created Planet Textures</li>
</ul>
</section>
<section id="education" class="clearfix">
<h3>Education</h3>
<p><strong>Certificate in Web Applications Developer</strong> (January 2012- May 2012), <strong>George Mason University -ed2go, Online Self-Pace Course</strong></p>
<p><strong>Bachelor of Fine Arts in Interactive Design & Game Development</strong> (September 2004- May 2007), <strong>Savannah College of Art & Design - Savannah, GA</strong></p>
<p><strong>Associate’s Degree in Applied Sciences in Computer Programming</strong> (August 2001- May 2004), <strong>College of Southern Maryland - La Plata, MD</strong></p>
</section>
</article>
</div>
<hr>
<footer>
<p>© Joshua Bock 2013</p>
</footer>
</div>
</div><!--/.fluid-container-->
<script src="public/js/page-contoller-min.js"></script>
</body>
</html>
的main.css
#resumeBd section {
padding-top: 100px;
}
請提供的jsfiddle。你確定你包含所有必要的文件嗎？ – alkis 2013-05-03 23:23:49
我看到你已經將所有的js包含在腳本中。你究竟做了什麼？將jquery和bootstrap複製並粘貼到一個大文件中？如果是這種情況，請嘗試從cdn中包含它們（或下載它們）以確保它們正確。 – alkis 2013-05-04 00:03:12
這是我的代碼的JSFiddle：http://jsfiddle.net/herrjosua81/5y6R9/5/。我使用Codekit將我所有的JS文件合併到一個文件中。確保HTML查看器足夠寬以使佈局在桌面上。我仍在研究一些問題。 – 2013-05-04 00:12:42