3

ASP.NET MVC5 Web アプリを作成しています。デフォルトのテンプレートはブートストラップを使用していますが、これはほとんどすべてのページで問題ありません。ただし、必要なページは 1 つです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

コンテナがレイアウトで使用され、ほとんどのページで問題なく使用されるという同様の問題がありましたが、そのコンテナ内に奇妙な全幅要素が必要でした。

.container-fluidBootstrap 3 では、幅 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>

あなたの場合、その 1 ページに他のコンテンツがなければ、ページ全体をセクションに入れることができます。

別のレイアウト ページを使用する

全幅にする必要があるページ全体の場合は、別のレイアウトを使用することができます。共通コードにパーシャルを使用し、.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>
于 2017-03-01T17:16:54.857 に答える
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 に答える