3

我正在制作一个 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% 的宽度。什么是优雅的方法？

4

3 回答 3

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/

于 2013-08-25T00:43:48.603 回答
2

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

从 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>
于 2017-03-01T17:16:54.857 回答
0

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

于 2013-08-25T08:19:21.583 回答