Bootstrap проблема navbar при вставке navbar-collapse в элемент flex - PullRequest
Новая
       23

Bootstrap проблема navbar при вставке navbar-collapse в элемент flex

0 голосов
/ 23 марта 2020

Я кодирую свою страницу навигации, используя bootstrap предварительно созданный. Это фрагмент кода, который я сейчас использую: 

<nav 
    class="navbar navbar-expand-md navbar-dark justify-content-between"
    style$="background-color: #{{maincolor}};"
>
    <a class="navbar-brand mr-auto" href="/">Logotipo</a>

    <div class="d-flex flex-row flex-md-row-reverse align-items-center">
        <paper-icon-button icon="search"></paper-icon-button>

        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div id="main-nav" class="collapse navbar-collapse text-right">
            <div class="navbar-nav stroke-hover">
                <a class="nav-item nav-link active" on-tap="changePage">Noticias</a>
                <a id="statistics" class="nav-item nav-link" on-tap="changePage">Estadísticas</a>
            </div>
        </div>
    </div>
</nav>

Кроме того, здесь вы тот же код в фрагменте кода, так что вы можете попробовать его.

Проблема заключается в том, что если вы измените размер окна так, чтобы появилась кнопка и щелкнули по ней, панель навигации будет расширяться справа от кнопки, а не вниз, как это должно быть.

Я проверил, что это вызвано div с display: flex, где размещены значок, кнопка и навигация. Однако, если я не использую display flex, я не могу заказать элементы, используя flex-direction: row и flex-direction: row-reverse, в зависимости от того, отображается кнопка или нет.

Как я могу решить эту проблему?

...