c#之试图在 MVC 4 Web 应用程序中获取容器外部的页脚

本质上，当使用 Visual Studio 2017 创建 MVC 4 应用程序时，页脚被限制在类为 container body-content 的 div 中。在 _layout.cshtml 中。当然，这会使页脚限制在 div 中:

但我们想要的是让页脚延伸整个页面的宽度，就像页眉一样。

当我注释掉div时，

页脚获得 100% 的宽度，但现在正文中的其他所有内容也是如此:

页脚下方还有一堆空白。这是 _layout.cshtml 的完整代码:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>@ViewBag.Title - My ASP.NET Application</title> 
@Styles.Render("~/Content/css") 
@Styles.Render("~/Content/Style.css") 
@Scripts.Render("~/bundles/modernizr") 
 
</head> 
<body> 
<div class="navbar navbar-inverse navbar-fixed-top" id="navbar-gradient"> 
    <div class="container"> 
        <div class="navbar-header"> 
            <!--<img src="~/images/lion-logo.png" />--> 
            <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> 
            <img src="~/images/lion-logo.png" id="logo"/> 
                @Html.ActionLink("LION TECHNOLOGIES", "Index", "Home", new { area = "" }, new { @class = "navbar-brand", @id = "logo-text" }) 
        </div> 
        <div class="navbar-collapse collapse" id="navbar-gradient"> 
            <!--hide links--> 
            <ul class="nav navbar-nav" id="hidden"> 
                <li>@Html.ActionLink("Reports", "Index", "Home")</li> 
                <li>@Html.ActionLink("Accounts", "About", "Home")</li> 
                <li>@Html.ActionLink("Settings", "Contact", "Home")</li> 
            </ul> 
            @Html.Partial("_LoginPartial") 
        </div> 
    </div> 
</div> 
 
   <!-- <div class="container body-content">--> 
    @RenderBody() 
    <!--<hr />--> 
    <footer> 
        <p>&copy; @DateTime.Now.Year - <img src="~/images/lion-logo.png" id="logo-footer" /> LION TECHNOLOGIES</p> 
    </footer>  
    <!--</div>--> 
 
@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/bootstrap") 
@RenderSection("scripts", required: false) 
 
</body> 
</html> 

我也试过将所有东西都包裹在 <body> 中</body>带有 container body-content 的标签div 但这没有任何效果。还有其他建议吗？

请您参考如下方法:

如果您使用的是 bootstrap 3，则尝试从具有容器类的 div 中删除页脚，然后在类 continer-fluid 之后创建另一个 div，并将页脚代码放入其中。 .container 是固定宽度，.container-fluid 是全宽。参见bootstrap 3的网格系统http://getbootstrap.com/css/#grid

<div class="container body-content"> 
    @RenderBody() 
</div> 
<div class="container-fluid"> 
    <hr /> 
    <footer> 
          <p>&copy; @DateTime.Now.Year - <img src="~/images/lion-logo.png" id="logo-footer" /> LION TECHNOLOGIES</p> 
    </footer> 
</div>