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

时间:2019-06-15 10:56:48

标签: asp.net-mvc bootstrap-4 localization right-to-left blazor

我使用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" />&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应用于其上方的任何级别,标签文本从左开始。

1 个答案:

答案 0 :(得分:0)

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

尝试使用Bootstrap-RTL代替标准的Bootstrap。