Мобильное меню Bootstrap не останется открытым

Question

Мобильное меню Bootstrap не останется открытым

Первый вопрос здесь, спасибо за ваше терпение.

Я искал похожий вопрос и был удивлен, что не нашел честно.

Я научился достаточно, чтобы создать для этого скрипку. Вы можете видеть это здесь

https://jsfiddle.net/jhallwebdev/gm6r6mLu/5/

HTML

<body>
<div class="container-fluid">
    <div class="row yellow container-fluid">    <!-- YELLOW NAV ROW -->
        <div class="col-lg-1 col-md-2 col-sm-2 col-xs-2">
            <div>
                <img src="logo.jpeg" alt="logo" title="logo" width="100px" height="100px" class="my-image">
            </div>
        </div>
        <div class="col-lg-5 col-md-7 col-sm-7 col-xs-7">
            <div class="jer-margin-left">
                <div class="header-title">My Bootstrap Site</div>
                <div class="header-slogan">And its navbar problem...</div>
            </div>
        </div>
        <div class="col-lg-6 col-md-3 col-sm-3 col-xs-3">
            <div>
                <nav class="navbar navbar-default">
                    <div class="container-fluid">
                        <div class="navbar-header">
                            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                                <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" id="bs-example-navbar-collapse-1">
                            <ul class="nav navbar-nav jer-nav">
                                <li class="jer-active"><a href="#">HOME <span class="sr-only">(current)</span></a></li>
                                <li><a href="#">ABOUT US</a></li>
                                <li><a href="#">SERVICES</a></li>
                                <li><a href="#">FORMS</a></li>
                                <li><a href="#">CONTACT US</a></li>
                            </ul>
                        </div><!-- /.navbar-collapse -->
                    </div><!-- /.container-fluid -->
                </nav>
            </div>
        </div>
    </div>  <!-- END YELLOW NAV ROW -->
</div>  <!-- END CONTAINER -->

CSS

[hidden] {
  display: none;
}

* {
    box-sizing: border-box;
}

.yellow {
    background-color: rgb(253, 232, 104);
    width: 100%;
}

.my-image {
    margin: 10px;
}

.jer-margin-left {
    margin-left: 15px;
}

.header-title {
    color: #000;
    font-family: Merriweather;
    font-style: italic;
    font-size: 30px;
    margin: 20px 0 0 0;
}

.header-slogan {
    color: #000;
    font-family: Merriweather;
    font-style: italic;
    font-size: 22px;
}

.no-left-margin {
    margin-left: -70px;
}

.navbar-default {
    background-color: rgb(253, 232, 104);
    border-color: rgb(253, 232, 104);
    padding-top: 20px;
}

.jer-nav {
    padding-top: 10px;
    padding-bottom: 10px;
    color: #000;
    text-align: center;
    font-family: Montserrat;
    font-size: 16px;
    text-transform: uppercase;
    float: right;
}

.navbar-default .navbar-nav>li>a {
    color: #000;
}

.navbar-default .navbar-nav>li>a:hover {
    color: white;
}

.container-fluid {
    padding-right: 0;
    padding-left: 0;
    margin: 0;
}

.jer-active {
    border: silver solid 1px;
    background-color: rgb(253, 232, 104);
}

@media (max-width: 420px) {
    .jer-margin-left {
        margin-left: 65px;
    }
}

@media (max-width: 600px) {
    .header-title {
        font-size: 22px;
    }

    .header-slogan {
        font-size: 15px;
    }

    .jer-margin-left {
        margin-left: 45px;
    }
}

@media (max-width: 1200px) {
    .ph-float-right {
        float: none;
        margin-right: 0;
    }
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

Уменьшите размер окна вывода, чтобы вызвать мобильное меню. (вместо горизонтального текстового меню)

ВОПРОС 1: Чтобы открыть мобильное меню, мне нужно дважды щелкнуть по нему. Это первая проблема.

ВОПРОС 2: Он не останется открытым.

При настройке скрипки я пришел к выводу, что это проблема css, поскольку, когда весь css был удален, он работает, как и ожидалось. Если я правильно настрою скрипку, МОЙ css находится в окне css, а css начальной загрузки входит через опции внешних ресурсов в jsfiddle.

Большое спасибо за поиск.

3

css twitter-bootstrap mobile navbar

Источник

user6871991 15 май '17 в 22:26

3 ответа

Решение

Посмотрев на скрипач, удалив

    .navbar-collapse.collapse {
        display: none!important;
    }

Решает проблему.

В CSS удалите приведенный выше код в @media (max-width: 1200px)

Я не могу воспроизвести твой 1-й номер.

ОБНОВЛЕНИЕ Я не уверен, что вы удалили. Вот обновленный код.

[hidden] {
  display: none;
}

* {
    box-sizing: border-box;
}

.yellow {
    background-color: rgb(253, 232, 104);
    width: 100%;
}

.my-image {
    margin: 10px;
}

.jer-margin-left {
    margin-left: 15px;
}

.header-title {
    color: #000;
    font-family: Merriweather;
    font-style: italic;
    font-size: 30px;
    margin: 20px 0 0 0;
}

.header-slogan {
    color: #000;
    font-family: Merriweather;
    font-style: italic;
    font-size: 22px;
}

.no-left-margin {
    margin-left: -70px;
}

.navbar-default {
    background-color: rgb(253, 232, 104);
    border-color: rgb(253, 232, 104);
    padding-top: 20px;
}

.jer-nav {
    padding-top: 10px;
    padding-bottom: 10px;
    color: #000;
    text-align: center;
    font-family: Montserrat;
    font-size: 16px;
    text-transform: uppercase;
    float: right;
}

.navbar-default .navbar-nav>li>a {
    color: #000;
}

.navbar-default .navbar-nav>li>a:hover {
    color: white;
}

.container-fluid {
    padding-right: 0;
    padding-left: 0;
    margin: 0;
}

.jer-active {
    border: silver solid 1px;
    background-color: rgb(253, 232, 104);
}

@media (max-width: 420px) {
    .jer-margin-left {
        margin-left: 65px;
    }
}

@media (max-width: 600px) {
    .header-title {
        font-size: 22px;
    }

    .header-slogan {
        font-size: 15px;
    }

    .jer-margin-left {
        margin-left: 45px;
    }
}

@media (max-width: 1200px) {
    .ph-float-right {
        float: none;
        margin-right: 0;
    }
    .navbar-header {
        float: none;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }

    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
}

1

Источник

user4058682 15 май '17 в 22:42

Я исправил это, убедившись, что у меня были те же версии boostrap.css а также bootstrap.js а также убедитесь, что я загрузил JQuery до bootstrap.js

0

Источник

user1834523 15 дек '18 в 23:15

Просто проверьте, есть ли у вас в html ссылку на загрузку js?

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

0

Источник

user7948428 15 май '17 в 22:32

Другие вопросы по тегам css twitter-bootstrap mobile navbar

user30945 15 май '17 в 22:47 2017-05-15 22:47 · Accepted Answer · 2017-05-15 22:47

Это говорит браузеру удалить его из вида, вы должны удалить его:

.navbar-collapse.collapse {
    display: none!important;
}

Bootstrap использует class="collapse" а также class="collapse show" на любом data-toggle="collapse" элемент.

Вы переопределили способность для class="collapse show" чтобы отобразить элемент, потому что вы сделали свой стиль !important а также потому, что вы соответствовали специфике селекторов начальной загрузки, также ссылаясь на два класса в вашем селекторе.

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