2017-07-28 50 views
0

很簡單,我在我的_layout.cshtml頁面的導航欄上放置了一個下拉菜單。它有一些項目,當我按預期點擊它時會下降。到現在爲止還挺好!但是當我在頁面開始處引用Bootstrap時,菜單將不再下降。 Bootstrap正在踩下我的下拉菜單。看來Bootstrap與MVC不兼容。有誰知道該修復應該是什麼?我已經在Chrome和Firefox中嘗試了這一點。我正在使用Visual Studio 2017和Bootstrap 4.以下是我的_layout.cshtml頁面的示例。如果我在我的mvc應用程序中啓用引導,下拉菜單不起作用

<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <title>@ViewBag.Title - Bootstrap Reference</title> 
    @Styles.Render("~/Content/css") 
    @Scripts.Render("~/bundles/modernizr") 
    @Scripts.Render("~/bundles/jquery") 
    @Scripts.Render("~/bundles/jqueryui") 
    @Scripts.Render("~/bundles/bootstrap")  
</head> 
<body> 
<div class="navbar navbar-default"> 
    <div class="container"> 
     <div class="navbar-header"> 
     @Html.ActionLink("BootStrap Practice", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) 
     </div>    
    <div class="navbar-collapse collapse"> 
    <ul class="nav navbar-nav">  
     <li> 
      <a href="#" data-toggle="dropdown" class="dropdown-toggle">Messages <b class="caret"></b></a> 
      <ul class="dropdown-menu"> 
       <li><a href="#">Inbox</a></li> 
       <li><a href="#">Drafts</a></li> 
       <li><a href="#">Sent Items</a></li>       
      </ul> 
     </li> 
     </ul> 
     @Html.Partial("_LoginPartial") 
    </div> 
    </div> 
</div> 

回答

0

你可以試試這個: 添加dropdown類的li元素。

<li class="dropdown"> 
    <a class="dropdown-toggle" data-toggle="dropdown" href="#">Messages <span class="caret"></span></a> 
    <ul class="dropdown-menu"> 
     <li><a href="#">Inbox</a></li> 
     <li><a href="#">Drafts</a></li> 
     <li><a href="#">Sent Items</a></li> 
    </ul> 
</li> 
+0

謝謝你的建議,但它沒有解決問題。另一位開發人員告訴我,MVC 5和Bootstrap之間存在兼容性問題。我已經搜索了這些問題的列表,但還沒有找到。到目前爲止,我遇到了html字段集和下拉菜單的問題。 – Crayon

0

通過在_Layout.cshtml頁面的結尾附近引用Bootstrap而不是它的開頭來解決問題。不知道爲什麼這很重要,但我是Bootstrap和MVC的新手,所以最終我可能會有更好的解釋。

相關問題