简体   繁体   中英

Can we nest bootstrap container in ASP.NET MVC view?

As per the bootstrap documentaion

Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.

In ASP.NET MVC we have layout.cshtml page which typically includes container. and all other views gets rendered inside the this container. Does that mean we cannot use 'container' in the individual view?

It all depends on your layout structure and what you want to achieve. There are 2 ways to accomplish this (I can't think of any more).

I don't use containers in my _Layout.cshtml template. I normally have my containers in my views. My _Layout.cshtml template only has the bare minimum.

This is what my _Layout.cshtml template normally looks like:

<body>
     @RenderBody()
     @Html.Partial("_Footer")
     @Scripts.Render("~/bundles/js")
     @RenderSection("scripts", false)
</body>

And then in my views I would have the following:

<div class="container">
     <p>Test paragraph</p>
</div>

You can also have the container in your _Layout.cshtml template but then in your views you must just remember that you already have a container that you are working with. So your _Layout.cshtml it could look like this:

<body>
     <div class="container">
         @RenderBody()
     </div>
     @Html.Partial("_Footer")
     @Scripts.Render("~/bundles/js")
     @RenderSection("scripts", false)
</body>

And then your view could look like this:

<p>Test paragraph</p>

The best way to see what will work in your scenario is to play around with the various positionings of the containers and the other HTML components. It will take a while but it will give you an indication of what is possible and what is not.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM