I’m new to Blazor. I have created the template application and the menu is bound to the left side of the screen. I used this solution to place the menu horizontally at the top:
Now all of the pages of the application have a large left margin. Checking the MainLayout.razor page, I see the class=”container”. The container class in the bootstrap.min.css file has the left-margin set to auto. For the life of me, I cannot determine why the system thinks there should be space in the margins.
The NavMenu.razor page:
<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
<div class="container-fluid">
<a class="navbar-brand" href="">BlazingTopMenu</a>
<button class="navbar-toggler @NavButtonCssClass" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
aria-controls="navbarCollapse" aria-label="Toggle navigation" @onclick="ToggleNavMenu">
<span class="navbar-toggler-icon"></span>
</button>
<span class="navbar-nav me-auto mb-2 mb-md-0">
<NavLink class="nav-link" href="" Match="NavLinkMatch.All">
<span class="oi oi-home" aria-hidden="true"></span> Home
</NavLink>
<NavLink class="nav-link" href="counter">
<span class="oi oi-plus" aria-hidden="true"></span> Counter
</NavLink>
<NavLink class="nav-link" href="fetchdata">
<span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
</NavLink>
</span>
</div>
</nav>
@code {
private bool collapseNavMenu = true;
private string? NavBarCssClass => collapseNavMenu ? null : "show";
private string? NavButtonCssClass => collapseNavMenu ? "collapsed" : null;
private void ToggleNavMenu()
{
collapseNavMenu = !collapseNavMenu;
}
}The MainLayout.razor page:
@inherits LayoutComponentBase
<NavMenu />
<main class="container">
@Body
</main>If I remove the class assignment from , or just remove the tag altogher, the formatting is more in line with what I want. But I’m not sure that’s a good idea.
Where is the left margin coming from?