如何为 Blazor 服务器应用设置显示宽度？

【问题标题】：How to set display width for Blazor server app?如何为 Blazor 服务器应用设置显示宽度？
【发布时间】：2021-01-13 09:53:59
【问题描述】：

默认情况下，应用程序使用 Bootstrap。我尝试在 MainLayout.razor 中使用几个 div 类，但该应用程序填充了整个屏幕宽度。例如，当应用在台式机（或笔记本电脑）上运行时，如何将其设置为屏幕宽度的 75%？

【问题讨论】：

标签： blazor

【解决方案1】：

您可以修改site.css 文件以在@987654324@ 容器上设置max-width。如果你想要content centered，你也可以设置margin: 0 auto;。

app {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Add these */
    max-width: 75%;
    margin: 0 auto;
}

或者，您可以在sidebar 和main divs 周围使用div，但您需要将其设置为d-flex。

<div class="d-flex w-75">
    <div class="sidebar"></div>

    <div class="main"></div>
</div>

【讨论】：