Question

我希望在_layout页面中有一个包含三个容器的布局：左容器，中央容器和右容器。我尝试使用以下代码，但它没有响应预期的结果。

<body>
        <header>
            @Html.Partial("_header")
        </header>       

         <div class="row">

             <div class="col-lg-4 well">
                 hello there lcont
                 @RenderBody()
             </div>

             <div class="col-lg-4 well" >
                  Central container
             </div>

             <div class="col-lg-4 well ">
                 right container
             </div>


         </div>



        <footer>
            <div class="content-wrapper">
                <div class="float-left">
                    <p>&copy; @DateTime.Now.Year - My ASP.NET MVC Application</p>
                </div>
            </div>
        </footer>

        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
    </body>

不是在一行中并排获得三个div，而是获得三个不同的行。

enter image description here

修改

我将col-lg-4更改为col-md-4并且它正常工作。任何解释我很困惑。

Answer 1

您需要使用section和RenderSection()代替RenderBody()。

在_Layout.cshtml中，渲染这样的部分，

<div class="row">

    <div class="col-lg-4 well">
        hello there lcont
        @RenderSection("Left")
    </div>

    <div class="lg-col-4 well">
        @RenderSection("Center")
    </div>

    <div class="lg-col-4 well ">
        @RenderSection("Right")
    </div>


</div>

在每个content.cshtml页面中，将部分内容划分为：

@section Left{
   <span> left content goes here</span> and here
}

@section Center{
   <div> Center content </div>
}

@section Right{
  any html here goes to <aside> Right content </aside>
}

<强> 注：的如果您的问题是div相互低于，请确保在我使用col-lg-*类时看到包含提供网格系统的bootstrap或相关css。

ASP.NET MVC中_layout.cshtml中的布局

1 个答案: