使用部分

Question

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

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

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

所有这些都很流畅，但我需要这个宽度为100％。这是一种优雅的方式吗？

Answer 1

在局部视图中，您可以使用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/

Answer 2

我设法通过制作呈现的内容absolute和left: 0的位置来解决它，但<footer>隐藏在它后面，所以我必须单独照顾那个（或完全删除它）。不是我希望的优雅解决方案，但有效。

Answer 3

我遇到了类似的问题，其中容器在布局中使用并且适用于大多数页面，但我想在容器中使用奇数全宽元素。

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

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

使用其他布局页

如果它是一个需要全宽的整页，你可以让它使用不同的布局。将partials用于公共代码，并将.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>  <div class="container-fluid"> <div>Full width div</div> </div> <div class="container">  <div>Back to normal</div>

100％宽度仅1页，其余为流动

3 个答案:

使用部分

使用其他布局页

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