给出:Bootstrap 5.1VS 2022 ProBlazor服务器应用程序我怎样才能使容器占据整个屏幕没有利润率左右?
<div class="container bg-primary"> Hello World! </div>
这就是它目前的样子:
jexiocij1#
我想你可能在找“container-fluid”类而不是“container”。试试这个:
<div class="container-fluid bg-primary"> Hello World! </div>
文档:https://getbootstrap.com/docs/5.0/layout/containers/
rdlzhqv92#
修改mainLayout.razor.css的最后一部分:
@media (min-width: 641px) { .page { flex-direction: row; } .sidebar { width: 250px; height: 100vh; position: sticky; top: 0; } .top-row { position: sticky; top: 0; z-index: 1; padding-left: 2rem !important; padding-right: 1.5rem !important; } article { height:100vh; } }
MainLayout.razor:
<div class="page"> <div class="sidebar"> <NavMenu /> </div> <main> <div class="top-row px-4"> <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a> </div> <article class="content ps-0 pt-0"> @Body </article> </main> </div>
在目标组件中:
<div class="container-fluid bg-primary" style="height:100vh"> Hello World! </div>
测试结果:
2条答案
按热度按时间jexiocij1#
我想你可能在找“container-fluid”类而不是“container”。
试试这个:
文档:https://getbootstrap.com/docs/5.0/layout/containers/
rdlzhqv92#
修改mainLayout.razor.css的最后一部分:
MainLayout.razor:
在目标组件中:
测试结果: