即使在Asp.Net MVC 5中使用bootstrap中的.container类后，Navbar也适合屏幕

I am a beginner in ASP.NET MVC.

我是ASP.NET MVC的初学者。

I am working on a project in which the navbar of my partial view for shared layout fits to screen even though I added .container class from bootstrap.

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

I want my navbar to be in the default size that .container class sets its content into.

我希望我的导航栏处于.container类将其内容设置为的默认大小。

If you refer the _Layout.cshtml script, you will see that the @RenderBody() is used to render the contents present in the body.

如果您引用_Layout.cshtml脚本,您将看到@RenderBody()用于呈现正文中存在的内容。

But the output of it is not what I expected. Why could this be happening?

但它的输出并不是我的预期。为什么会发生这种情况?

_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>

1 个解决方案

#1

Your partial view should include only what you want to have in place of the RenderBody helper. You are including the head and body tags again, which is just breaking everything apart.

您的局部视图应仅包含您想要的内容以代替RenderBody助手。你再次包括头部和身体标签,这只是打破了一切。

So your Index.cshtml should be:

所以你的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>

EDIT

In regards to the navbar. You have to wrap it in a .container:

关于导航栏。你必须将它包装在.container中:

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

It's on the docs

这是关于文档的

#1