div忽略前一个div
div忽略前一个div
提问于 2014-03-04 01:27:54
我的div出了点问题。出于某些未知的原因，我的主div忽略了nav 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>我很想上传这个问题的截图，但我不知道怎么做。谢谢你的帮助！
回答 3
Stack Overflow用户
发布于 2014-03-04 01:40:19
您的布局应该是这样的吗？Working Fiddle
#main-content {
color: #000;
overflow:hidden;
}Stack Overflow用户
发布于 2014-03-05 00:01:11
我想通了。我添加了
#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中，突然一切都变好了。我不能完全确定为什么，但是，它做到了。感谢所有参与的人。
Stack Overflow用户
发布于 2014-03-05 00:56:35
这是意料之中的，因为您对导航栏使用了" navbar -fixed-top“类。它应用了CSS固定定位。
现在您有两个选择。
顶部固定删除“scrollable.
- Add --
- ”，但在这种情况下，您的导航将变成顶部填充，等于导航的高度，到主体标签的顶部。
有关更多信息，请阅读Bootstrap文档。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22153274
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号