MVC5/Bootstrap：添加到 Nav 不会将正文内容下推

Question

我在 VS2013 U4 中工作，有一个 MVC/bootstrap 网站，当我添加到 nav/menu 时，它并没有把所有东西都往下推，正文的顶部被切断了。我有两个子菜单，根据用户点击的控制器显示。当它们出现时，它会切断页面主体的顶部。这是我的相关布局：

 <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 的 "navbar-fixed-top" 意味着它 CSS position: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 因此，如果第二个菜单显示（...在执行控制器上浏览），它将进一步向下移动所有内容。

MVC5/Bootstrap：添加到 Nav 不会将正文内容下推

MVC5/Bootstrap: adding to Nav doesn't push body content down

layout

twitter-bootstrap-3

navigation

asp.net-mvc-5.1