我的div有问题。由于某种原因我不知道我的主要div忽略了导航div和位置。有人可以帮忙吗？
请参阅http://jsfiddle.net/lschoebel/6WuSm/
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand img-responsive" href="index.html"><img src="img/logo3.png" alt="logo"></a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="services.html">Services</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
<li><a href="company.html">Company</a></li>
<li><a href="careers.html">Careers</a></li>
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
</div><!--/.navbar-collapse -->
</div>
</div>
<div id="main-content" style="opacity: 1; display: block;">
<section id="main" role="main">
<article id="post-4471">
<div id="intro" class="row">
<div class="post-4471 page type-page status-publish hentry entry">
<h1>Mobile Consulting Services—Map Your Mobile Strategy</h1>
<p>A few years ago, the mobile space didn’t exist. Today, it is thriving.<br>
Since the inception of mobile, HarborDev has been there. We bring unparalleled mobile strategy expertise to the table, driving engagement programs for leading enterprise and consumer-facing clients.</p>
</div>
</div>
<section class="panel-section">
<div class="row">
<div class="post-4471 page type-page status-publish hentry entry narrow-entry">
<h3>Consulting as a Service (CaaS)</h3>
<p>CaaS is mobile consulting at its finest. It is flexible, on-demand, and customized. There is no “one-size-fits-all” approach. Your needs are your own, your strategy should be too. Here are a few things we can assist you with:</p>
<ul>
<li>Project the size of your mobile market</li>
<li>Define and reach your target audience</li>
<li>Set and realize your mobile vision</li>
<li>Ensure customer value through mobile execution</li>
<li>Integrate your mobile and enterprise strategies</li>
<li>Align mobile goals with IT capabilities.</li>
<li>Translate your ideas into technical specifications.</li>
<li>Understand and weigh your options—<strong><a title="Mobile Web App Development" href="#">mobile sites</a></strong>, <a title="Mobile Web App Development" href="#"><strong>mobile apps</strong></a>, <strong><a title="Native App Development" href="#">native apps</a></strong>, SMS and more</li>
<li>Platform-agnostic</li>
<li>Flexible services; we can develop and execute, work with third parties or simply provide strategic counsel</li>
</ul>
<div class="row"><div class="column large-6 small-12"><p></p>
<h4><strong>Enterprise Level Solutions</strong></h4>
<p>When <strong><a title="GE Intelligent Platforms" href="#">GE</a></strong> approached us with questions about the best mobile operating system to sit on top of their existing hardware and software, we advised them that recent kernel level changes to Android’s OS made it the best choice for them. We understand your <a title="Mobile Enterprise" href="#"><strong>enterprise</strong></a> has its own unique blend of web-based and IT architecture. We also know how to work within those systems to incorporate the right mobile platforms for you.</p>
<p></p></div><div class="column large-6 small-12"><p></p>
<h4><strong>Consumer Facing Solutions</strong></h4>
<p>When the <strong><a title="Barclays Center" href="#">Barclays Center</a></strong>, home of the <strong><a title="The Brooklyn Nets" href="#">Brooklyn Nets</a></strong>, asked us how to create a branded mobile experience for sports and music fans, our team suggested <a title="Cloud | API Integration" href="#"><strong>API integration</strong></a> for quick mobile internet connection, advanced streaming functionality, and in-app GPS-enabled location services. We understand your audience demands a compelling mobile experience, and create mobile strategy solutions that drive outstanding user experiences for you and your customers.</p>
<p></p></div></div>
</div>
</div>
</section>
</article>
</section> <!-- /#main -->
<div id="single-nav" class="navigation sticky-fixed">
<ul class="page-nav">
<li class="close-panel"><a title="Back to Services" href="services.html"></a></li>
<li class="prev-item"><a href="#" rel="prev">Mobile Design</a></li> </ul>
</div>
<footer class="call-to-action">
<a href="#">Contact us to discuss your mobile strategy today. <i class="icon-angle-right"></i></a>
</footer>
</div>
<footer id="footer">
<div class="row" style="margin-right:388px; margin-left:388px;">
<section id="text-4" class="widget widget_text"><h4 class="widget-title">Contact Us</h4> <div class="textwidget"><address>2907 State Road 590 Suite#19<br>
Clearwater, FL 33659</address>
<p>(888) 604-0030</p>
</div>
</section>
<section id="nav_menu-2" class="widget widget_nav_menu">
<h4 class="widget-title">Inside HarborDev</h4>
<div class="menu-inside-harbordev-container">
<ul id="menu-inside-harbordev" class="menu">
<li id="menu-item-4302" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4302"><a href="#">About</a></li>
<li id="menu-item-4303" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4303"><a title="HarborDev Blog" href="#">Blog</a></li>
<li id="menu-item-6753" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-6753"><a href="#">Technology Partners</a></li>
<li id="menu-item-7827" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-7827"><a href="#">Press Materials</a></li>
</ul>
</div>
</section>
<section id="nav_menu-3" class="widget widget_nav_menu">
<h4 class="widget-title">Follow Us</h4>
<div class="menu-social-media-container">
<ul id="menu-social-media" class="menu">
<li id="menu-item-4305" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4305"><a target="_blank" href="http://twitter.com/harbordev">Twitter</a></li>
<li id="menu-item-4306" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4306"><a target="_blank" href="#">Facebook</a></li>
<li id="menu-item-4307" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4307"><a target="_blank" href="#">LinkedIn</a></li>
<li id="menu-item-4308" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-4308"><a target="_blank" href="#">Google+</a></li>
</ul>
</div>
</section>
<section id="text-6" class="widget widget_text">
<h4 class="widget-title">Careers</h4>
<div class="textwidget"><p>Join our team and learn how we grew to become one of the top mobile app development companies worldwide.</p>
<p><a href="#">View all open positions</a></p>
</div>
</section>
</div>
</footer>
<div class="footer-bar-section">
<p class="copyright">© 2014 HarborDev, LLC. All Rights Reserved.</p>
</div>
<div class="footer-bar-section">
<ul id="menu-footer-menu" class="menu">
<li class="menu-item">
<span id="obf"><a href="mailto:support@harbordev.com?subject=Support request via harbordev.com">Support</a>
<noscript><span style="unicode-bidi:bidi-override;direction:rtl;">moc.sppaeertwolliw@troppus</span></noscript></span>
</li>
</ul>
</div>
</body>
</html>
我很想上传问题的截图，但我不知道如何。谢谢你的帮助！
答案 0 :(得分：0)
这是你的布局看起来如何？ Working Fiddle
#main-content {
color: #000;
overflow:hidden;
}
答案 1 :(得分：0)
我明白了。我添加了
#main {
width: 100%;
position: relative;
}
.main {
top: -72px;
overflow: hidden;
width: 1024px;
margin-bottom: -72px;
font-size: 1.333em;
line-height: 1.85;
}
#post-4471 {
margin-top: 90px;
}
到我的CSS，突然间它解决了所有问题。我不完全确定为什么，但它做到了。感谢所有参与的人。
答案 2 :(得分：0)
这是预期的，因为您使用导航栏的“navbar-fixed-top”类。 它应用CSS固定定位。
现在你有两个选择。
有关详情，请参阅Bootstrap文档。