Bootstrap固定導航欄不能用於asp.net mvc5

我一直在使用mvc5和bootstrap 3.7.7的星座asp.net工作一段時間，而且根本沒有任何問題。到目前爲止，我已經遇到了從bootstrap集成固定導航欄的問題，這裏是我參考https://www.w3schools.com/bootstrap/bootstrap_navbar.asp的示例，並且我在標準生成的「_Layout.cshtml」模板中使用了該片段，默認情況下給了我這個模板。Bootstrap固定導航欄不能用於asp.net mvc5

這是我目前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") 
 
    @Scripts.Render("~/bundles/modernizr") 
 

 
</head> 
 
<body data-spy="scroll" data-target=".navbar" data-offset="50"> 
 
    <div class="navbar navbar-inverse navbar-fixed-top"> 
 
     <div class="container-fluid"> 
 
      <div class="navbar-header"> 
 
       @Html.ActionLink("navbar-brand", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) 
 
      </div> 
 
      <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>    
 
     </div> 
 

 
     <ul class="nav navbar-nav"> 
 

 
      <li><a>@Html.ActionLink("About", "About", "Home")</a></li> 
 
      <li><a>@Html.ActionLink("Property Groups", "Index", "PropertyGroups")</a></li> 
 
      <li><a>@Html.ActionLink("Properties", "Index", "Property")</a></li> 
 
      <li><a>@Html.ActionLink("Property Values", "Index", "PropertyValues")</a></li> 
 
      <li><a>@Html.ActionLink("Upload CSV Files", "Index", "csvUpload")</a></li> 
 
      <li><a>@Html.ActionLink("Glimpse", "Index", "glimpse.axd")</a></li> 
 
      @Html.Partial("_LoginPartial") 
 
     </ul> 
 
    </div> 
 
    <div class="container body-content"> 
 
     @RenderBody() 
 
     <hr /> 
 
     <footer> 
 
      <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p> 
 
     </footer> 
 
    </div> 
 

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

而我得到我的Firefox瀏覽器是 this。

來源

2017-10-04 badbyte

您遇到的問題是由於您的導航欄鏈接。請參閱@ Html.ActionLink爲您生成錨標籤，而不需要將它放在錨標籤中。

所以你當前的鏈接看起來像這樣在HTML：

<li><a><a href="/Home/About">About</a></a></li>

更改鏈接：

<li>@Html.ActionLink("About", "About", "Home")</li>

這將產生此HTML結果：

<li><a href="/Home/About">About</a></li>

那是什麼你要。所以，只需刪除所有打開和關閉錨點標記，它應該沒問題。

來源

2017-10-04 14:52:28 Laiman

Bootstrap固定導航欄不能用於asp.net mvc5

回答

相關問題