Как сделать ярлыки на веб-сайтах справа налево, это не работает - PullRequest
Новая
       62

Как сделать ярлыки на веб-сайтах справа налево, это не работает

0 голосов
/ 15 июня 2019

Я создал веб-сайт с использованием MVC Core и Bootstrap 4. Он расположен справа налево, и, например, метки его форм начинаются справа.Я создал веб-сайт Blazor, скопировал bootstrap.min.js и форму с основного сайта MVC и применил direction = "rtl" и dir = "rtl" к Blazor Body и другим элементам, но тексты меток по-прежнему начинаются слева.Я также попробовал flex-direction: column-reverse;и flex-направление: обратный ряд;это не сделало сайт справа налево.В чем здесь проблема? 

<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 голосов
/ 16 июня 2019

Применение направленности RTL на уровне документа или оболочки не изменит способ, которым Bootstrap позиционирует свои элементы.

Попробуйте использовать Bootstrap-RTL вместо стандартной Bootstrap.

...