Сделать содержимое Bootstrap 3.0 NavBar всегда свернутым

Мне нужно, чтобы раздел NavBar Bootstrap 3.0 всегда сворачивался.

Актуальные разделы навбара:

  • Ссылки
  • Форма поиска
  • Форма входа

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

Когда я открываю страницу на ПК, я вижу три раздела в видимой панели (а не кнопки для сворачивания). Что мне нужно? В представлении ПК только скройте форму входа и покажите кнопку, чтобы свернуть эту форму входа. Независимо от разрешения, мне нужно, чтобы кнопка входа всегда была видна, а раздел рухнул. Это мой фактический код:

<nav class="navbar navbar-inverse" role="navigation">
    <div class="navbar-header">
        <!--Toggles -->
        <button type="button" class="navbar-toggle boton" 
                data-toggle="collapse" data-target="#sesion">
            <span class="glyphicon glyphicon-user"></span>
        </button>
        <button type="button" class="navbar-toggle boton"
                data-toggle="collapse" data-target="#links" id="menuToggle">
            <span class="glyphicon glyphicon-align-justify"></span>
        </button>
        <button type="button" class="navbar-toggle boton" 
                data-toggle="collapse" data-target="#buscar">
            <span class="glyphicon glyphicon-search"></span>
        </button>
        <!--Logo en vista Mobile -->
        <a class="navbar-brand" style="padding: 10px 0 0 15px" href="#">
            <span class="visible-xs">
                <img src="img/nsnow.png" width="37" height="36" alt="Logo" />
            </span>
        </a>
    </div>

    <ul class="collapse navbar-collapse nav navbar-nav" id="links">
        <!--Links -->
        <li><a style="padding-left: 40px"></a></li>
        <li class="botonMenu" id="boton_generos"><a >Géneros</a></li>
        <li class="botonMenu" id="boton_categorias"><a >Categorías</a></li>
        <li class="botonMenu" id="boton_senales"><a >Señales</a></li>
    </ul>

    <div class="collapse navbar-collapse" id="buscar">
        <!--Buscar -->
        <form class="navbar-form navbar-right" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Buscar">
            </div>
            <button type="submit" class="btn boton">
                <span class="glyphicon glyphicon-search"></span>
            </button>
        </form>
    </div>

    <div class="collapse navbar-collapse" id="sesion">
        <!--Buscar -->
        <form class="navbar-form navbar-right" role="search">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Usuario">
                <input type="text" class="form-control" placeholder="Contraseña">
            </div>
            <button type="submit" class="btn boton">
                <span class="glyphicon glyphicon-search"></span>
            </button>
         </form>
     </div>
</nav>

toggle collapse twitter-bootstrap navbar
person Martín    schedule 19.09.2013    source источник
comment
Это может помочь: stackoverflow.com/questions/21076922   -  person Gerfried    schedule 02.08.2018

Ответы (5)


arrow_upward
7
arrow_downward

Вы должны переопределить некоторые css, чтобы он оставался свернутым

http://jsbin.com/UpeZazi/1/edit

В этом примере я сделал кнопку «Вход пользователя» свернутой.

CSS:

@media (min-width: 768px) {
  #login-btn {
    display: block;
  }

  #sesion.collapse {
    display: none !important;
  }
}

HTML:

в основном то же самое, за исключением того, что я добавил идентификатор login-btn в элемент кнопки входа в систему:

<button type="button" id="login-btn" class="navbar-toggle boton" data-toggle="collapse" data-target="#sesion">
    <span class="glyphicon glyphicon-user"></span>
 </button>
person hajpoj    schedule 19.09.2013

arrow_upward
9
arrow_downward

Для тех, кто использует LESS, перейдите к variables.less и измените:

@grid-float-breakpoint:     @screen-sm-min;

to:

@grid-float-breakpoint:     999999999px;

Одно изменение строки, которое работает как шарм. Просто убедитесь, что вы используете нереально большое количество пикселей (у меня не сработало em).

person cfx    schedule 15.05.2014
comment
Работал на меня. Спасибо. - person Ken Prince; 19.11.2014
comment
вместо того, чтобы саботировать исходный код, вы можете просто создать новый файл меньшего размера, импортировать файл без основного файла начальной загрузки и снова объявить вышеупомянутую переменную. Когда он компилируется, он использует ваше перезаписанное значение в исходном коде начальной загрузки. В этом красота меньшего. - person Robin Jonsson; 15.09.2016

arrow_upward
4
arrow_downward

Попробуй это:

.navbar-toggle {
    display: block;
}

.navbar-collapse.collapse {
    display: none !important;
}
person Jo Smo    schedule 04.06.2015

arrow_upward
1
arrow_downward

Основываясь на ответе @cfx, переопределение переменной grid-float-breakpoint (что я предпочитаю) с использованием SASS:

$grid-float-breakpoint:     999999999px;
person nessunluogo    schedule 27.10.2017

arrow_upward
0
arrow_downward

Если вы не можете изменить меньше переменных, вы также можете переопределить классы начальной загрузки после 768px (граница смартфона). Ниже приведен рабочий код, который заменяет базовые панели навигации выпадающими меню. Не все классы переопределяются ниже, поэтому в зависимости от того, что вы используете, вам может потребоваться переопределить другие классы.

    @media (min-width: 768px){
        .navbar-nav .open .dropdown-menu {
            position: static;
            float: none;
            width: auto;
            margin-top: 0;
            background-color: transparent;
            border: 0;
            -webkit-box-shadow: none;
            box-shadow: none;
        }
        .navbar-nav .open .dropdown-menu > li > a {
            line-height: 20px;
        }
        .navbar-nav .open .dropdown-menu > li > a,
        .navbar-nav .open .dropdown-menu .dropdown-header {
            padding: 5px 15px 5px 25px;
        }
        .dropdown-menu > li > a {
            display: block;
            padding: 3px 20px;
            clear: both;
            font-weight: normal;
            line-height: 1.42857143;
            color: #333;
            white-space: nowrap;
        }
        .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;*/
            margin: 7.5px 50px 7.5px -15px
        }
        .navbar-nav>li {
            float: none;
        }
        .navbar-nav>li>a {
            padding-top: 10px;
            padding-bottom: 10px;
        }
        .navbar-text {
            float: none;
            margin: 15px 0;
        }
        /* since 3.1.0 */
        .navbar-collapse.collapse.in { 
            display: block!important;
        }
        .collapsing {
            overflow: hidden!important;
        }
    }

нажмите здесь, чтобы просмотреть демо-код

person jeanadam    schedule 27.05.2016