如何将 jumbotron 放在菜单上下文下方？答案

【问题标题】：How put jumbotron below menu context?如何将 jumbotron 放在菜单上下文下方？
【发布时间】：2013-12-21 00:42:34
【问题描述】：

我有一个使用 boostrap 布局的页面。

<body>
 <div class="navbar  navbar-default navbar-fixed-top" role="navigation">        
    <div class="container">
  //All menu stuff occuping all the width of the top.
 </div>

  //Jumbotron rendering body of views.
  <div class="jumbotron">
    @RenderBody()
  </div>
</body>

jumbotron CSS：

 .jumbotron {
 height: 100%;
 padding-top: 80px;
 padding: 40px;
 margin-bottom: 0px;
 font-size: 15px;
 font-weight: 100;
 line-height: 2.1428571435;
 color: inherit;
 }

我有一个带有 Telerik 网格的视图，当它显示在屏幕上时，它适合菜单后面。因为我认为jumbotron正在占用100％。那么，我怎样才能将 jumbotron 放在菜单下方，将它们分开呢？

【问题讨论】：

标签： html css asp.net-mvc twitter-bootstrap

【解决方案1】：

从您的导航中删除导航栏固定类，如下所示：

<div class="navbar  navbar-default" role="navigation">

如果你想要一个固定的导航栏，添加一个padding top: 30px（等于你的导航栏的高度）到body

身体{ 填充：30px 0 0； }

【讨论】：

感谢它解决了我的问题。但现在我需要向下滚动大约 50 像素才能看到我的页脚。看看这是什么，没有css经验。