MVC5 / Bootstrap：添加到Nav并不​​会降低身体内容

Question

我在VS2013 U4中使用MVC / bootstrap网站工作，当我添加到导航/菜单时，它没有将所有内容都推下来，身体的顶部正在被切断。 我有两个子菜单，根据用户击中的控制器显示。当它们出现时，它会切断页面主体的顶部。 这是我的_Layout的相关内容：

 <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>
            @Html.ActionLink("XXXX Corporate", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("About", "AboutUs", "About")</li>
                <li>@Html.ActionLink("Executives", "Section/Executive-Team", "Executive")</li>
                <li>@Html.ActionLink("Portfolio", "Index", "Property")</li>
                <li>@Html.ActionLink("Research", "Index", "ResearchArticle")</li>
            </ul>
            <p class="nav navbar-text navbar-right">Hello, @User.Identity.Name!</p>
        </div>
        @{ // Sub-Menu for About Sections
            if (HttpContext.Current.Request.RequestContext.RouteData.Values["controller"].ToString().Contains("About")
                || HttpContext.Current.Request.RequestContext.RouteData.Values["controller"].ToString().Contains("Executive"))
            {
                Html.RenderAction("AboutSubMenu", "About");
            }
        }

        @{ // Sub-Menu for Executive Sections
            if (HttpContext.Current.Request.RequestContext.RouteData.Values["controller"].ToString().Contains("Executive"))
            {
                Html.RenderAction("ExecutiveSubMenu", "Executive");
            }
        }           
    </div>
</div>

关于子菜单：

<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
    <li>@Html.ActionLink("About Us", "AboutUs", "About", null, null)</li>

...

这是它的样子：

Answer 1

显然，bootstrap＆＃34; navbar-fixed-top＆＃34;意味着它的CSS位置：fixed将它保持在顶部而不是其他所有位置。所以，需要的是身体上的填充顶部，如下所示：

 @{ // Sub-Menu for About Sections
            if (HttpContext.Current.Request.RequestContext.RouteData.Values["controller"].ToString().Contains("About")
                || HttpContext.Current.Request.RequestContext.RouteData.Values["controller"].ToString().Contains("Executive")
                || HttpContext.Current.Request.RequestContext.RouteData.Values["controller"].ToString().Contains("ResearchArticle"))
            {
                Html.RenderAction("AboutSubMenu", "About");
                // since this is a 'fixed' menu we need to set padding dynamically
                <style>
                    body {
                        padding-top: 90px;
                    }
                </style>
            }
        }

        @{ // Sub-Menu for Executive Sections
            if (HttpContext.Current.Request.RequestContext.RouteData.Values["controller"].ToString().Contains("Executive"))
            {
                Html.RenderAction("ExecutiveSubMenu", "Executive");
                // since this is a 'fixed' menu we need to set padding dynamically
                <style>
                    body {
                        padding-top: 140px;
                    }
                </style>
            }
        }   

当然，最后放置的CSS会覆盖早期的CSS，因此，如果第二个菜单显示（...在Executive控制器上浏览），它将进一步降低所有内容。