Blazor HTML 渲染问题

Question

我不确定如何最好地解释这一点，因为我是一名刚开始涉足网络的桌面应用程序开发人员。似乎 Blazor 正在将 .razor 文件中的回车转换为 html 渲染中的元素。我已经注意到这一点一段时间了，但这些元素似乎没有影响任何东西。好吧，我遇到了一种情况，它们正在影响我的布局。如果您查看我的屏幕截图，您将在此页面控件中看到我制作的 Next 和 Last 按钮之间有一个空格。我的另一个屏幕截图显示了渲染的 html 元素，您会在这些按钮之间看到 。这些元素似乎也无处不在。通过一些测试，我意识到这是 .razor 文件中 html 代码中的回车。如您所见，我将 First 和 Prev 按钮放在了一行代码中，但 Next 和 Last 按钮放在了 2 行中。

Page Control

Html Elements

<div class="my-2">
<button disabled="@(CurrentPage==1)" class="btn btn-sm btn-outline-primary py-0 px-1" style="font-size: small; font-family: Webdings;" @onclick="First_Click">&#57;</button><button disabled="@(CurrentPage==1)" class="btn btn-sm btn-outline-primary py-0 px-1" style="font-size: small; font-family: Webdings;" @onclick="Prev_Click">&#51;</button>

@for (int i = 1; i <= TotalPages; i++)
{
    int x = i;
    <button disabled="@(CurrentPage==i)" class="btn btn-sm @(CurrentPage==i ? "btn-primary" : "btn-outline-primary") py-0 px-1" style="font-size: small; font-family: Courier;" @onclick="()=>Page_Click(x)">@i</button>
}

<button disabled="@(CurrentPage==TotalPages)" class="btn btn-sm btn-outline-primary py-0 px-1" style="font-size: small; font-family: Webdings;" @onclick="Next_Click">&#52;</button>
<button disabled="@(CurrentPage==TotalPages)" class="btn btn-sm btn-outline-primary py-0 px-1" style="font-size: small; font-family: Webdings;" @onclick="Last_Click">&#58;</button>

Answer 1

由于您似乎在使用 Bootstrap，请尝试使用 ButtonGroup link here 作为按钮的包装器。我以前见过类似的问题。

我在我的一个应用程序中的一个按钮组中包含了一个按钮图像

如果您想了解更多详细信息，请回复我，我会为您指出存储库中的一些代码。