如何从右到左制作网站标签，它不起作用

Question

我使用 MVC Core 和 Bootstrap 4 建立了一个网站，它是从右到左的，例如它的表单标签从右开始。我创建了一个 Blazor 网站并从 MVC 核心站点复制了 bootstrap.min.js 和一个表单，并将 direction="rtl" 和 dir="rtl" 应用于 Blazor Body 和其他元素，但标签文本仍然从左侧开始。 我也试过 flex-direction: column-reverse;和 flex-direction: row-reverse;这并没有使网站从右到左。这里有什么问题？

<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" />&nbsp;@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>
        &nbsp;|&nbsp;
        <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 应用于其上方的任何级别，标签文本从左侧开始。

Answer 1

在文档或包装级别应用 RTL 方向性不会改变 Bootstrap 定位其元素的方式。

尝试使用Bootstrap-RTL，而不是标准的 Bootstrap。