css 仅1页为100%宽度，其余页保持流动

xurqigkl 于 2023-01-22 发布在其他

关注(0)|答案(4)|浏览(233)

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

css

来源：https://stackoverflow.com/questions/18422786/100-width-for-only-1-page-leave-the-rest-as-fluid

4条答案

按热度按时间

kh212irz1#

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

赞(0）回复(0）举报 2023-01-22

lymnna712#

我也遇到过类似的问题，布局中使用了容器，对大多数页面都很好，但我想在容器中使用一个奇怪的全宽元素。
从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>

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

我不推荐这个，因为它很笨拙，而且会显示错误，但是它可以编译并工作。如果你在内容中间的某个地方有一个元素，不管出于什么原因，你想用全角的话，这个可以用。

- 查看：**

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

赞(0）回复(0）举报 2023-01-22

yqkkidmi3#

我设法解决了这个问题，把渲染内容的位置设置为absolute和left: 0，但是<footer>隐藏在它后面，所以我必须单独处理这个问题（或者完全删除它）。

赞(0）回复(0）举报 2023-01-22

nbnkbykc4#

您可以使用剃刀代码在_Layout.cshtml文件中更改页面的样式。

<div class="container" style="@(ViewData["Title"] == "Page1" ? "max-width: 100%;" : "")">

将“Page1”替换为您的真实的页面标题。

赞(0）回复(0）举报 2023-01-22

我来回答

css 仅1页为100%宽度，其余页保持流动

4条答案

使用节

使用另一个布局页面

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

相关问题

热门标签

最新问答