MVC5 / Bootstrap: добавление в Nav не снижает основной контент

Я работаю в 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>

...

Вот как это выглядит: Как это выглядит


navigation layout twitter-bootstrap-3 asp.net-mvc-5.1
person Beau D'Amore    schedule 03.06.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Очевидно, что bootstrap «navbar-fixed-top» означает, что это позиция CSS: fixed сохраняет его вверху и над всем остальным. Итак, что нам нужно, это padding-top в теле вроде этого:

 @{ // 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, поэтому, если отображается второе меню (... просмотр на исполнительном контроллере), оно перемещает все дальше вниз.

person Beau D'Amore    schedule 03.06.2015