我使用MVC Core和Bootstrap 4建立了一个网站,它是从右到左,例如,其表单标签从右开始。我创建了一个Blazor网站,并从MVC核心站点复制了bootstrap.min.js和一个表单,并将direction =“ rtl”和dir =“ rtl”应用于Blazor主体和其他元素,但是Labels文本仍然从左开始。 我还尝试了flex-direction:column-reverse;和flex-direction:行反向;并未使网站从右到左。这是什么问题?
<div class="card" style="margin: 0 auto; width: 70%;background-color: lightgray; ">
<div class="card-header">@login</div>
<div class="card-block m-1 p-2">
<EditForm Model="@Model" OnValidSubmit="@HandleValidSubmit">
<input type="hidden" name="returnUrl" value="returnUrl" />
<DataAnnotationsValidator />
<ValidationSummary />
<div class="form-group">
<label for="user">@user</label>
<InputText class="form-control" id="user" bind-Value="@Model.User" />
</div>
<div class="form-group">
<label for="password">@password</label>
<InputText Id="password" class="form-control" bind-Value="@Model.Password" />
</div>
<div class="form-group">
<InputCheckbox Id="rememberMe" bind-value="@Model.RememberMe" /> @rememberMe
</div>
<button class="btn btn-primary" type="submit">@login</button>
<br /><br />
<NavLink class="nav-link" style="display:inline;" href="/account/register">
@register
</NavLink>
|
<NavLink class="nav-link" style="display:inline;" href="/account/requestpasswordreset">
@forgotPassword
</NavLink>
</EditForm>
<label style="color: @(Model.Success ? "green" : "red")">@Model.Message</label>
@if (!AsyncSuccess)
{
<label style="color: red;">@*Async method or Network Error.*@ @asyncError</label>
}
@if (AjaxLoading)
{
<img width="80" src="images/ajax-loader.gif" />
}
</div>
@*<label>@Model.Token</label>*@
使用此表单并将rtl应用于其上方的任何级别,标签文本从左开始。