Контроль входа в Blazor на телефоне исчезает - PullRequest
Новая
       24

Контроль входа в Blazor на телефоне исчезает

0 голосов
/ 17 января 2020

Работая над новым веб-сайтом Blazor на стороне сервера, я начал с шаблона Visual Studio 2019 с NavBar внизу слева. Разместите ссылки входа и регистрации в верхнем правом углу верхнего ряда. Все отлично работает для настольных браузеров, но при запуске на телефоне NavBar переключается, как и должно быть вверх, но ссылки Register и Login () исчезают. Я знаю, что это, вероятно, вещь bootstrap. У кого-нибудь есть решение этой проблемы? 

<div class="sidebar">
    <NavMenu />
</div>

<div class="main">
    <div class="top-row px-4 fixed-top">
        <LoginDisplay />
    </div>
    <CookieConsent />
    <div class="content px-4">
        @Body
    </div>
</div>

Настольные браузеры Desktop Browser

Телефонные браузеры Phone Browser

Ответы [ 2 ]

0 голосов
/ 17 января 2020

Я просто добавляю кнопки входа, выхода и регистрации в боковое меню.

В моем файле / Shared / NavMenu.razor , у меня есть это: 

<AuthorizeView>
    <Authorized>
        ...
        <li class="nav-item px-3">
            <form method="post" action="Identity/Account/LogOut">
                <button type="submit" class="btn btn-link">
                    <span style="color:white"> [Logout]</span>
                </button>
            </form>
        </li>
    </Authorized>
    <NotAuthorized>
        <li class="nav-item px-3">
            <NavLink class="nav-link" href="Identity/Account/Login">
                <span class="oi oi-list-rich" aria-hidden="true"></span> [Login]
            </NavLink>
        </li>
        @if (AllowRegistration)
        {
            <li class="nav-item px-3">
                <NavLink class="nav-link" href="Identity/Account/Register">
                    <span class="oi oi-list-rich" aria-hidden="true"></span> [Register]
                </NavLink>
            </li>
        }
    </NotAuthorized>
</AuthorizeView>
0 голосов
/ 17 января 2020

.main .top-row скрыто на порте просмотра менее 767,98 пикселей с wwwroot/css/site.css:

. css

@media (max-width: 767.98px) {
    .main .top-row {
        display: none;
    }
}

Таким образом, ваш компонент входа не отображается

...