什么将 Blazor WASM 模板 MainLayout.razor <div>s 作为内联元素布局？

Question

我正在学习Blazor WebAssembly(blazorwasm(模板是如何工作的。我看不到MainLayout.razor 的布局

<div class="sidebar">
<NavMenu />
</div>

和

<div class="main">
<div class="top-row px-4">
<a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
</div>

作为内联元素。当我插入时，我更困惑

<div>
<p>Why is this inline?</p>
</div>

CCD_ 1和CCD_。

我理解<div>是一个块级元素，它总是从新行开始。我搜索了从Blazor WebAssembly(blazorwasm(模板生成的解决方案，并在MSDN Blazor Layouts文档中查找，但找不到任何将块级<div>作为内联元素布局的内容。

有人能告诉我我缺了什么吗？

Answer 1

它们不是"内联"布局的。

Blazor模板使用css。在net5中，MainLayout.razor.css设置周围的<div class="page">以使用FlexBox和flex-direction: column;来实现整体布局。

由于<div> ... </div>的父元素，它被定位为柔性列。