如何设置Blazor服务器应用程序的显示宽度

Question

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

Answer 1

您可以修改site.css文件以在app容器上设置max-width。如果希望以内容为中心，也可以设置margin: 0 auto;。

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

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

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