2017-05-15 42 views
1

本質上,使用Visual Studio 2017創建MVC 4應用程序時,頁腳被限制在_layout.cshtml中的類container body-content的div內。當然,這使得專區內限制頁腳:嘗試在MVC 4 Web應用程序的容器之外獲取頁腳

enter image description here

但我們要的是頁腳擴展頁面的整個寬度,就像頭。

當我註釋掉DIV,

enter image description here

頁腳得到寬度的100%,但現在這樣做一切在身體:

enter image description here

也有在頁腳下面有一堆空白的空白空間。下面是_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中的一切,但沒有任何效果。還有其他建議嗎?

回答

1

由於我還是新的C#,我不知道該行@RenderBody()呈現自身的整個身體部分。所有我需要做的是這樣的:

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

@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/bootstrap") 
@RenderSection("scripts", required: false) 

</body> 
</html> 

關閉如果你再工作,你可以將其標記爲答案,請後@RenderBody()

2

如果您使用引導程序3,然後嘗試從具有類容器的div中刪除頁腳,之後再用類continer-fluid創建另一個div並將腳本代碼放入其中。 .container是固定寬度,.container-fluid是全寬。請參閱引導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> 
+0

@ HappyHands31股利? – Mrugesh

相關問題