Bootstrap 3.3.7 4beta2: Navigationsleiste mit Rasiermesser nicht

Question

Guten Tag arbeiten,

Ich habe ein asp.net MVC-Projekt, das Bootstrap 3.3.7 verwendet. Ich möchte von dieser Version auf 4 Beta 2 migrieren, dafür benutze ich Bootstrap von Get bootstrap. Aber ich kann sehen, dass meine Navigationsleiste kaputt ist.

Ich erwarte so etwas wie dieses Bild zu bekommen (ich habe diese Navigationsleiste aus einem Standard-MVC-Projekt in Visual Studio 2015, die die Bootstrap version3.3.7 verwendet)

Dies ist der navbar Code für v 4 beta 2:

<div class="navbar navbar-dark bg-dark fixed-top navbar-expand-sm"> 
    <div class="container"> 
     <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">&#x2630;</button> 
     @Html.ActionLink("my page", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
       <li class="nav-item">@Html.ActionLink("Home", "Index", "Home")</li> 
       <li class="nav-item">@Html.ActionLink("About", "About", "Home")</li> 
       <li class="nav-item">@Html.ActionLink("Contact", "Contact", "Home")</li> 
      </ul> 
     </div> 
    </div> 
</div> 

Und das für v3.3.7

<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("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) 
     </div> 
     <div class="navbar-collapse collapse"> 
      <ul class="nav navbar-nav"> 
       <li>@Html.ActionLink("Home", "Index", "Home")</li> 
       <li>@Html.ActionLink("About", "About", "Home")</li> 
       <li>@Html.ActionLink("Contact", "Contact", "Home")</li> 
      </ul> 
     </div> 
    </div> 
</div> 

Ich habe die erforderlichen Skripte und CSS mit Bundles hinzugefügt:

@Styles.Render("~/Content/css") 
@Scripts.Render("~/bundles/modernizr") 
@Scripts.Render("~/bundles/bootstrap") 

Frage: Wie kann ich meine Navbar reparieren? Danke.

Answer 1

ich das Bootstrap-Paket mit Nugget aktualisiert, auf der Version 4, das ist der Code für eine grundlegende navbar, die von v.3 übersetzt

<nav class="navbar navbar-expand-lg navbar-light bg-light fix fixed-top"> 

    <div class="container"> 
     @Html.ActionLink("My page icon", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" }) 
     <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> 
      <span class="navbar-toggler-icon"></span> 
     </button> 

     <div class="collapse navbar-collapse" id="navbarSupportedContent"> 
      <ul class="navbar-nav mr-auto"> 
        <li class="nav-item"> 
         @Html.ActionLink("one link", "Index", "controll1", null, new { @class = "nav-link" }) 
        </li> 
        <li class="nav-item"> 
         @Html.ActionLink("Manage other things", "Index", "controll2", null, new { @class = "nav-link" }) 
        </li> 
      </ul> 
      @Html.Partial("_LoginPartial") 
     </div> 
    </div> 
</nav>