【问题标题】：100% width for only 1 page, leave the rest as fluid仅 1 页 100% 宽度，其余部分保持流畅
【发布时间】：2013-08-27 16:23:36
【问题描述】：

我正在制作一个 ASP.NET MVC5 Web 应用程序。默认模板使用引导程序，几乎适用于所有页面。但是我需要一页才能拥有width: 100%。

我要使用的视图是局部视图，因此它将在.container（见下面的代码）以及其他局部视图中呈现。

<div class="container">
    @RenderBody()
    <hr />
    <footer>
        <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
    </footer>
</div>

所有这些都可以流动，但我需要这个是 100% 宽度。什么是优雅的方法？

【问题讨论】：

所有其他页面是否共享同一个 .container div？
是的。所有页面都在@RenderBody() 的位置呈现。 .container 的宽度由引导程序根据当前窗口大小动态维护。
stackoverflow.com/questions/15204976/…查看此帖...
您可以覆盖引导样式并为 .container 设置 100% 宽度。
我只需要它在一个页面上是 100%，而让其他页面保持原样。

标签： css asp.net-mvc twitter-bootstrap asp.net-mvc-5

【解决方案1】：

我有一个类似的问题，容器在布局中使用并且适用于大多数页面，但我希望该容器中有一个奇怪的全宽元素。

从 Bootstrap 3 开始，您可以将 .container-fluid 类用于 100% 宽度的内容。然而，在.container 中使用它什么都不做，因为它受到.container 宽度的限制。以下是我遇到的一些选项/解决方法：

使用部分

如果容器内容的开头或结尾总是使用 100% 宽度的内容，您可以在布局页面中定义部分，并在其中插入 100% 宽度的元素。

布局：

<div class="container-fluid">
    @RenderSection("containerFluid", required: false)
</div>

<div class="container">
    @RenderBody()
</div>

查看：

@section containerFluid
{
    <div>Full width content.</div>
}

<div>Other content</div>

在您的情况下，如果该页面上没有其他内容，则可以将整个页面放在该部分中。

使用另一个布局页面

如果整个页面需要全宽，您可以让它使用不同的布局。对公共代码使用部分并将.container 元素更改为.container-fluid。

普通布局：

<!DOCTYPE html>
<html lang="en">
@Html.Partial("_LayoutHead")
<body>
    @Html.Partial("_Navbar")

    <div class="container">
        @RenderBody()
    </div>

    @Html.Partial("Footer")
</body>
</html>

替代布局

<!DOCTYPE html>
<html lang="en">
@Html.Partial("_LayoutHead")
<body>
    @Html.Partial("_Navbar")

    <div class="container-fluid">
        @RenderBody()
    </div>

    @Html.Partial("Footer")
</body>
</html>

手动关闭容器并稍后重新打开

我不会真正推荐这个，因为它非常hacky，并且会显示错误，但它确实可以编译和工作。如果您在内容中间的某处有一个元素，无论出于何种原因想要全宽，则可以使用此选项。

查看：

<div>Some normal content here.</div>

</div> <!--This shows an error for missing a starting tag. The actual starting tag is on the layout page.-->

<div class="container-fluid">
    <div>Full width div</div>
</div>

<div class="container"> <!--This shows an error for missing an ending tag. It actually gets closed using the end tag in the layout page-->
    <div>Back to normal</div>

【讨论】：

这应该是公认的答案。在 Shared 文件夹中创建一个新的 _Layout 页面（右键单击 Shared > Add > New Item > 选择“MVC 5 Layout Page (Razor)”）。创建文件后，在您的 cshtml 页面顶部使用该布局：@{ Layout = "~/Views/Shared/_LayoutFullWidth.cshtml"; }。我复制了默认_Layout页面的内容并将<div class="container body-content">更改为<div class="container-fluid body-content">

【解决方案2】：

在您的局部视图中，您可以使用 jQuery 来修改容器 div 的 CSS。每当呈现该视图时，这都会改变宽度，但不会影响其他页面。

编辑：正如 OP 所指出的，Bootstrap 的 JS 将在调整窗口大小时重置宽度。所以我们必须这样做：

$(document).ready(function(){
     setWidthOfContainer();
     $(window).resize(setWidthOfContainer);
});

function setWidthOfContainer(){
     console.log("Setting width of container to 100%.");
     $('div.container').css('width','100%');
}

在这里查看小提琴：http://jsfiddle.net/GqRd7/

【讨论】：

谢谢，但不好，因为在窗口调整大小时，引导程序会处理 .container 并再次调整它的大小。
感谢您的更新。我不想走这种“以编程方式对抗引导程序”的方式。

【解决方案3】：

我设法通过将渲染内容的位置设置为absolute 和left: 0 来解决它，但<footer> 隐藏在它后面，所以我必须单独处理那个（或完全删除它）。不是我想要的优雅解决方案，但有效。

【讨论】：