Выпадающее меню Bootstrap Mobile отображается как версия для ПК - PullRequest
Новая
       16

Выпадающее меню Bootstrap Mobile отображается как версия для ПК

0 голосов
/ 06 июня 2018

Я использую OctoberCMS с меню Bootstrap .

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

desktop

Он должен отображаться так же, как на их веб-сайте , где он размещается в строках.

october mobile

JS Fiddle

https://jsfiddle.net/Ldm1p63r/

Я сузил проблему до open класс добавлен / удален из <li class="dropdown "> с помощью JavaScript.

HTML-меню 

<nav id="layout-nav" class="navbar navbar-inverse navbar-fixed-top navbar-autohide" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
        </div>

        <div class="collapse navbar-collapse">

            <ul class="nav navbar-nav navbar-left">
                <li class="active">
                    <a href="#">Home</a>
                </li>

                <li>
                    <a href="#">About</a>
                </li>

                <li class="dropdown ">
                    <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown">
                      Blog <i class="icon-chevron-down"></i>
                    </a>
                    <ul class="dropdown-menu">
                        <li class="dropdown-item">
                            <a href="#">Category 1</a>
                        </li>
                        <li class="dropdown-item">
                            <a href="#">Category 2</a>
                        </li>
                        <li class="dropdown-item">
                            <a href="#">Category 3</a>
                        </li>  
                    </ul>
                </li>

                <li>
                    <a href="#">Contact</a>
                </li>
            </ul>

        </div>
    </div>
</nav>

CSS

Я, например, применяю тему OctoberCMS css для оформления меню.

https://octobercms.com/themes/website/assets/css/theme.css

JS

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/js/bootstrap.js

Обновление: OctoberCMS также может использовать эти файлы https://github.com/rainlab/vanilla-theme/tree/master/assets/vendor/bootstrap/js

1 Ответ

0 голосов
/ 06 июня 2018

Я просто добавил те же css, что и на своем сайте, за исключением того, что в вашей скрипке кажется, что вместо open используется класс show.

js fiddleрешение

CSS 

@media (max-width: 767px) {
  .navbar-nav .show .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    box-shadow: none;
  }
}

rendered

...