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

Posted 2023-03-27

技术标签:

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

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

【问题讨论】：

【参考方案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>

【讨论】：

以上是关于如何为 Blazor 服务器应用设置显示宽度？的主要内容，如果未能解决你的问题，请参考以下文章