Bootstrap 如何让主容器占据整个屏幕?

mrzz3bfm  于 2023-10-14  发布在  Bootstrap
关注(0)|答案(2)|浏览(153)

给出:
Bootstrap 5.1
VS 2022 Pro
Blazor服务器应用程序
我怎样才能使容器占据整个屏幕没有利润率左右?

<div class="container bg-primary">
  Hello World!
</div>

这就是它目前的样子:

jexiocij

jexiocij1#

我想你可能在找“container-fluid”类而不是“container”。
试试这个:

<div class="container-fluid bg-primary">
Hello World!
</div>

文档:https://getbootstrap.com/docs/5.0/layout/containers/

rdlzhqv9

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>

测试结果:

相关问题