即使在 Asp.Net MVC 5 中使用来自 bootstrap 的 .container class 后，导航栏也适合屏幕

Question

我是 ASP.NET MVC 的初学者。

我正在开发一个项目，其中共享布局的局部视图的导航栏适合屏幕，即使我从 bootstrap 添加了 .container class。

我希望我的导航栏采用 .container class 设置其内容的默认大小。

如果您参考 _Layout.cshtml 脚本，您会看到 @RenderBody() 用于呈现正文中的内容。

但是它的输出并不是我所期望的。为什么会这样？

_Layout.cshtml:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>@ViewBag.Title - BBC Application</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--Links to other CSS-->
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/mdb.css" rel="stylesheet" />
    <link href="~/Content/mdb.min.css" rel="stylesheet" />
    <link href="~/Content/Site.css" rel="stylesheet" />
</head>

<body>
    <!--Navigation Bar-->
    <nav class="navbar navbar-expand-sm navbar-light fixed-top z-depth-1" style="background-color: #F5F5F5">
        <!--Navbar toggle button-->
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#nav-content" aria-controls="nav-content" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <!--Logo-->
        <a class="navbar-brand" href="#">
            <img src="~/Content/Images/BBCLogo.png" height="50" width="50" />
        </a>
        <!--Links-->
        <div class="collapse navbar-collapse" id="nav-content">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link hoverable" href="#">Home</a>
                </li>
                <li class="divider-vertical">
                </li>
                <li class="nav-item">
                    <a class="nav-link hoverable" href="#">About Us</a>
                </li>
                <li class="divider-vertical">
                <li class="nav-item">
                    <a class="nav-link hoverable" href="#">Contact</a>
                </li>
            </ul>
            <ul class="navbar-nav ml-auto">
                <li class="nav-item">
                    <a class="nav-link hoverable" href="#">Login</a>
                </li>
                <li class="divider-vertical">
                <li class="nav-item">
                    <a class="nav-link hoverable" href="#">Register</a>
                </li>
            </ul>
        </div>
    </nav>

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer class="footer">
            <div class="container">
                <span class="text-muted">&copy; Copyright 2017 Big Boy Cars @DateTime.Now </span>
            </div>
        </footer>
    </div>

    <script src="~/Scripts/bootstrap.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/jquery-3.2.1.min.js"></script>
    <script src="~/Scripts/mdb.js"></script>
    <script src="~/Scripts/mdb.min.js"></script>
    <script src="~/Scripts/popper.min.js"></script>
    <script src="~/Scripts/modernizr-2.6.2.js"></script>
</body>
</html>

Index.cshtml:

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>@ViewBag.Title - Index</title>
    <link href="~/Content/bootstrap.css" rel="stylesheet" />
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Content/mdb.css" rel="stylesheet" />
    <link href="~/Content/mdb.min.css" rel="stylesheet" />
</head>
<body>
    <div class="container">
        <div id="MyCarousel" class="carousel slide carousel-fade" data-ride="carousel">
            <!--Indicators-->
            <ol class="carousel-indicators">
                <li data-target="MyCarousel" data-slide-to="0" class="active"></li>
                <li data-target="MyCarousel" data-slide-to="1"></li>
                <li data-target="MyCarousel" data-slide-to="2"></li>
            </ol>
            <!--Slides-->
            <div class="carousel-inner z-depth-1" role="listbox">
                <div class="carousel-caption">
                    <h3 class="h3-responsive">Big Boy Cars</h3>
                    <p>Best car dealers in market</p>
                </div>
                <!--First Slide-->
                <div class="carousel-item active">
                    <div class="view hm-black-light">
                        <img class="d-block w-100" src="~/Content/Images/CarouselImage01.jpg" alt="First Slide" />
                        <div class="mask"></div>
                    </div>
                </div>
                <!--Second Slide-->
                <div class="carousel-item">
                    <div class="view hm-black-light">
                        <img class="d-block w-100" src="~/Content/Images/CarouselImage02.jpg" alt="First Slide" />
                        <div class="mask"></div>
                    </div>
                </div>
                <!--Third Slide-->
                <div class="carousel-item">
                    <div class="view hm-black-light">
                        <img class="d-block w-100" src="~/Content/Images/CarouselImage03.jpg" alt="First Slide" />
                        <div class="mask"></div>
                    </div>
                </div>
            </div>
            <!--Controls-->
            <a class="carousel-control-prev" href="#MyCarousel" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#MyCarousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>

    <script src="~/Scripts/bootstrap.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="~/Scripts/jquery-3.2.1.min.js"></script>
    <script src="~/Scripts/mdb.js"></script>
    <script src="~/Scripts/mdb.min.js"></script>
    <script src="~/Scripts/popper.min.js"></script>
</body>
</html>

Answer 1

您的部分视图应该只包含您想要的内容来代替 RenderBody 助手。您再次包含 head 和 body 标签，这只是将所有内容分开。

所以你的 Index.cshtml 应该是：

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

        <div id="MyCarousel" class="carousel slide carousel-fade" data-ride="carousel">
            <!--Indicators-->
            <ol class="carousel-indicators">
                <li data-target="MyCarousel" data-slide-to="0" class="active"></li>
                <li data-target="MyCarousel" data-slide-to="1"></li>
                <li data-target="MyCarousel" data-slide-to="2"></li>
            </ol>
            <!--Slides-->
            <div class="carousel-inner z-depth-1" role="listbox">
                <div class="carousel-caption">
                    <h3 class="h3-responsive">Big Boy Cars</h3>
                    <p>Best car dealers in market</p>
                </div>
                <!--First Slide-->
                <div class="carousel-item active">
                    <div class="view hm-black-light">
                        <img class="d-block w-100" src="~/Content/Images/CarouselImage01.jpg" alt="First Slide" />
                        <div class="mask"></div>
                    </div>
                </div>
                <!--Second Slide-->
                <div class="carousel-item">
                    <div class="view hm-black-light">
                        <img class="d-block w-100" src="~/Content/Images/CarouselImage02.jpg" alt="First Slide" />
                        <div class="mask"></div>
                    </div>
                </div>
                <!--Third Slide-->
                <div class="carousel-item">
                    <div class="view hm-black-light">
                        <img class="d-block w-100" src="~/Content/Images/CarouselImage03.jpg" alt="First Slide" />
                        <div class="mask"></div>
                    </div>
                </div>
            </div>
            <!--Controls-->
            <a class="carousel-control-prev" href="#MyCarousel" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#MyCarousel" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>

编辑

关于导航栏。您必须将其包装在 .container:

<div class="container">
  <nav class="navbar navbar-expand-lg navbar-light bg-light">
   ..
  </nav>
</div>

它在 docs

即使在 Asp.Net MVC 5 中使用来自 bootstrap 的 .container class 后，导航栏也适合屏幕

Navbar fits to screen even after using .container class from bootstrap in Asp.Net MVC 5

html

asp.net-mvc

partial-views

navbar

bootstrap-4