机身不跌落于引导引导之下
机身不跌落于引导引导之下
提问于 2015-03-30 04:55:04
有CSS/HTML问题的引导。由于某种原因，导航似乎并没有向下推下以下HTML的各个方面。请参阅https://jsfiddle.net/xaazf6u2/
<div id="topNavigation">
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<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" href="#">BCF</a>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li class="dropdown"><a href="/" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">History <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="/history.php?site=FGT">FGT</a></li>
<li><a href="/history.php?site=BB">BB</a></li>
</ul>
</li>
</ul>
<ul id="login" class="nav navbar-nav navbar-right"></ul>
</div><!--/.nav-collapse -->
</div>
</nav>
</div>
<div id="pageContent" class="container">
<div class="jumbotron">
<h1>Welcome</h1>
<p>Use the form below to upload an order feed. Once uploaded, FedEx shipping will be purchased, labels and packing slip generated for us. Use the navigation above to access previously generated files.</p>
</div>
</div>从示例中可以看出，jumbotron应该在导航http://getbootstrap.com/examples/theme/下面有一些空间。
回答 4
Stack Overflow用户
回答已采纳
发布于 2015-03-30 05:21:29
当您使用固定肚脐引导建议，您添加填充到您的身体，以防止这个问题。所以在你的CSS中你需要添加
body { padding-top: 70px; }Stack Overflow用户
发布于 2015-03-30 04:59:27
导航条是position:fixed，因此在滚动时它会留在屏幕上。固定位置的元素不会影响其他元素的布局，因此需要手动设置页边距或填充。
有关此问题的注意事项，请参见引导文档。
车身填充物所需 固定的导航栏将覆盖您的其他内容，除非您将填充添加到
<body>的底部。尝试你自己的价值观，或者使用下面的片段。提示:默认情况下，导航条高50 is。复制body { padding-bottom: 70px; }请确保在核心引导CSS之后包含此内容。
Stack Overflow用户
发布于 2015-03-30 04:59:22
类“导航条-固定顶部”意味着内容是可滚动的，并在导航栏下。
如果你想保留这个特性，或者如果你不想删除“导航条固定顶部”类，就给内容添加一个页边距顶。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29346814
复制相关文章
相似问题
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验
腾讯云开发者
