【问题标题】：ASP.NET MVC with Bootstrap 4带有引导程序 4 的 ASP.NET MVC
【发布时间】：2018-09-27 16:55:20
【问题描述】：

您好，目前我正在尝试使用 Bootstrap 4 实现 ASP.NET Web 应用程序。但是，由于当前 ASP.NET 支持 Bootstrap 3，因此只有模板设计为适合 Bootstrap 3。然后在升级时，所有代码逻辑都已更改他们引入了一个新的

我正在尝试分别实现 _Layout.cshtml 和 _LoginPartial.cshtml。但是，当代码运行时，即使我将

类作为“nav-item”，它也不会在导航栏中添加对齐或着色效果。我正在添加我的代码以便您更好地理解它，如下所示

我需要做的是将我的普通导航链接放在左侧，并将登录和注册部分放在导航栏的右侧。

_LoginPartial.cshtml

    @using Microsoft.AspNet.Identity
@if (Request.IsAuthenticated)
{
   using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", @class = "inline" }))
   {
   @Html.AntiForgeryToken()

   <ul class="navbar-nav">
       <li class="nav-item">
           @Html.ActionLink("Hello " + User.Identity.GetUserName() + "!", "Index", "Manage", routeValues: null, htmlAttributes: new { title = "Manage" })
       </li>
       <li><a href="javascript:document.getElementById('logoutForm').submit()">Log off</a></li>
   </ul>
   }
}
else
{
   <ul class="navbar-nav ">
       <li class="nav-item">@Html.ActionLink("Register", "Register", "Account", routeValues: null, htmlAttributes: new { id = "registerLink" })</li>
       <li class="nav-item">@Html.ActionLink("Log in", "Login", "Account", routeValues: null, htmlAttributes: new { id = "loginLink" })</li>
   </ul>
}

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title </title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>
        <nav class="navbar navbar-expand-lg navbar-dark fixed-top navbar-fixed-top mb-4" style="background-color:#1a75ff">

            <a class="navbar-brand" href="#">*******</a>

            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNavDropDown">
                <ul class="navbar-nav">
                    <li class="nav-item">@Html.ActionLink("Home", "Index", "Home", new { }, new { @class="nav-link" })</li>

                @Html.Partial("_LoginPartial")

            </div>
        </nav>

        <div class="container body-content">
            @RenderBody()
            <hr />
            <footer>
                <p>&copy; @DateTime.Now.Year </p>
            </footer>
        </div>

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

谢谢！ :)

【问题讨论】：

标签： html asp.net-mvc bootstrap-4

【解决方案1】：

_Layout.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 class="pt-0">
<div class="navbar navbar-expand-lg navbar-dark bg-dark">


        @Html.ActionLink("Application name", "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">
            <li class="nav-item active">
                <a>@Html.ActionLink("Home", "Index", "Home", new { @class = "nav-link"})</a>

            </li>
            <li class="nav-item">
                <a>@Html.ActionLink("About", "About", "Home", new { @class = "nav-link" })</a>

            </li>
            <li class="nav-item">
                <a>@Html.ActionLink("Contact", "Contact", "Home", new { @class = "nav-link" })</a>

            </li>

        </ul>
        @Html.Partial("_LoginPartial")
    </div>
</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>

_LoginPartial.html

@using Microsoft.AspNet.Identity
@if (Request.IsAuthenticated)
{
  using (Html.BeginForm("LogOff", "Account", FormMethod.Post, new { id = "logoutForm", 
  @class = "ml-auto" }))
 {
    @Html.AntiForgeryToken()

    <ul class="navbar-nav ml-auto">
        <li class="nav-item">
            @Html.ActionLink("Hello " + User.Identity.GetUserName() + "!", "Index", 
"Manage", routeValues: null, htmlAttributes: new { title = "Manage", @class = "nav- 
link active" })
        </li>
        <li class="nav-item"><a 
           href="javascript:document.getElementById('logoutForm').submit()" 
           class="nav-link">Log off</a>
</li>
    </ul>
    }
}

_Layout.html 文件中无序列表的结束标记丢失

确保为导航栏的正确 css 类添加所有必要的更改，

Bootstrap 类可以在here找到

【讨论】：