Question

我创建了一个基于Microsoft提供的默认设计/视图的asp.net MVC站点。所以它看起来与this site完全一样。

我制作了我的应用程序，现在我想改变一下外观。这是一个问题：这个默认视图模板完全错误。

我想做什么： enter image description here

为什么我不能：

_Layout.cshtml文件在我的网站的每个页面上都是相同的（它可能被称为“部分视图”）。以下是它如何处理网站的主要部分：

<div class="container body-content">

    @RenderBody() <!-- HERE GOES THE MAIN PART OF SITE -->

</div>

在由@RenderBody加载的视图中，我想创建一个与顶部黑色导航栏一样宽的div。我不能，因为父（div .container .body-content）指定了“max-width”。所以我不能让我的div宽度达到身体的100％。

我无法删除max-width，因为我想保留其余的视图它现在的位置。
我无法修改所有视图并添加一些视图标签具有“max-width”并从中删除“max-width” “。容器”。或许我可以，但这将是太多的工作。

你建议我做什么？是否有任何简单的方法可以使这个div 100％宽度但不改变视图对象的位置？

Answer 1

您可以尝试的是拆分内容页面。灰色的Contoso大学将是它自己的div，你可以改变任何东西，保持第二个div与你原封不动的原始css。

Answer 2

基本上不是这个HTML：

<div class="container body-content">
    <div class="jumbotron">
        <h1>Contoso University</h1>
    </div>
    <div class="row">
        <div class="col-md-4">
            <h2>Welcome to Contoso University</h2>
            <p>
            Contoso University is a sample application that
            demonstrates how to use Entity Framework 6 in an
            ASP.NET MVC 5 web application.
            </p>
        </div>
    <div class="col-md-4">
        <h2>Build it from scratch</h2>
        <p>You can build the application by following the steps in the tutorial series on the ASP.NET site.</p>
        <p><a class="btn btn-default" href="http://www.asp.net/mvc/tutorials/getting-started-with-ef-using-mvc/">See the tutorial »</a></p>
    </div>
    <div class="col-md-4">
        <h2>Download it</h2>
        <p>You can download the completed project from the Microsoft Code Gallery.</p>
        <p><a class="btn btn-default" href="http://code.msdn.microsoft.com/ASPNET-MVC-Application-b01a9fe8">Download »</a></p>
    </div>
</div>

你可以使用：

<div class=" body-content">
    <div class="jumbotron">
        <h1>Contoso University</h1>
    </div>
</div>
<div class="container body-content">
    <div class="row">
        <div class="col-md-4">
            <h2>Welcome to Contoso University</h2>
            <p>
            Contoso University is a sample application that
            demonstrates how to use Entity Framework 6 in an
            ASP.NET MVC 5 web application.
            </p>
        </div>
    <div class="col-md-4">
        <h2>Build it from scratch</h2>
        <p>You can build the application by following the steps in the tutorial series on the ASP.NET site.</p>
        <p><a class="btn btn-default" href="http://www.asp.net/mvc/tutorials/getting-started-with-ef-using-mvc/">See the tutorial »</a></p>
    </div>
    <div class="col-md-4">
        <h2>Download it</h2>
        <p>You can download the completed project from the Microsoft Code Gallery.</p>
        <p><a class="btn btn-default" href="http://code.msdn.microsoft.com/ASPNET-MVC-Application-b01a9fe8">Download »</a></p>
    </div>
</div>

我刚刚制作了两个不同的<div class="container body-content">一个用你的灰色标题和一个用于你的内容，并删除了第一个container类（该类设置了the max-width div }）

或者（因为我刚刚在另一个答案中提到你的评论）删除了类container并将其添加到任何dinamic div中，其中你需要有一个固定宽度的内容

Answer 3

这有点hacky，但它对我有用。它基本上是创建一个与当前灰色条高度相同的伪元素，并将其设置为全宽灰色条。

将此添加到您的CSS（您可能还需要使用“jumbotron”栏的高度来完善它）：

.jumbotron:after{
    content:"";
    top:0;
    left:0;
    right:0;
    height:240px;
    z-index:-1;
    position:absolute;
    background:#EEEEEE;
}

Answer 4

您可以按照容器的内容来做示例如下：

Answer 5

只需删除类名

来自：

div class="container body-content">

    @RenderBody() <!-- HERE GOES THE MAIN PART OF SITE -->
/div>

至：

<div>

    @RenderBody() <!-- HERE GOES THE MAIN PART OF SITE -->
/div>

有效

绕过父级的最大宽度：将div宽度设置为窗口宽度的100％

5 个答案: