Блог

Главная - Вопросы по программированию - Bootstrap 3 — Как сохранить компонент свертывания навигации открытым при загрузке

Bootstrap 3 — Как сохранить компонент свертывания навигации открытым при загрузке

#html #css #twitter-bootstrap #twitter-bootstrap-3

#HTML #css #twitter-bootstrap #twitter-bootstrap-3

Вопрос:

Я использую Bootstrap3 и использую сворачиваемый элемент в своем дизайне.

 <!-- Search Filter -->
<div id="search-filter">
  <div class="container">
    <div class="row">
      <div class="col-md-5 col-xs-12">

        <!-- Collapse Search -->
        <button type="button" class="navbar-toggle navbar-toggle-search-filter" data-toggle="collapse" data-target="#searchbar-collapse-set"> <span class="sr-only">Toggle navigation</span> <span class="glyphicon glyphicon-chevron-down"></span> </button>
        <!-- /Collapse Search -->

        <h3>Showing 345 Results <small>(Hill Stations around Bangalore)</small></h3>

      </div>

      <!-- Collect the nav links, forms, and other content for toggling -->
      <div class="collapse navbar-collapse" id="searchbar-collapse-set">

        <div class="col-md-4 col-xs-12">
          <div class="distance">
            <h5>distance:</h5>
            <div id="distance-slider"></div>
            <span class="distance-value">250 kms</span>
          </div>
        </div>

        <div class="col-md-3 col-xs-12">
          <div class="sort">
            <h5>sort:</h5>
            <ul class="nav nav-pills">
              <li class="active"><a href="#">popular</a></li>
              <li><a href="#">name</a></li>
              <li><a href="#">distance</a></li>
            </ul>
          </div>
        </div>

      </div>
      <!-- /.navbar-collapse -->

      <div class="clearfix"></div>

    </div>
  </div>
</div>
<!-- /Search Filter -->

Как я могу использовать Media-Query или JS, чтобы он оставался открытым на небольших устройствах по умолчанию?

Ответ №1:

Добавьте класс «in» в панель поиска -сверните-установите div следующим образом:

 <div class="navbar-collapse collapse in" id="searchbar-collapse-set">

Редактировать:

Переключение управляется медиа-запросом. В этом правиле для его отображения установлено значение none с разрешением 768 пикселей:

 @media (min-width: 768px) {
  .navbar-toggle {
    display: none;
  }
}

Таким образом, вы можете либо переопределить правило в своих собственных стилях, либо настроить файл Bootstrap css.

Комментарии:

1. есть ли способ активировать его с помощью JS. я также хочу переключить значок кнопки

2. Точка, в которой отображается переключатель, задается в css. Это не контролируется js. Да, вы могли бы написать функцию js / jQuery для управления отображением или скрытием переключателя, но тогда вам пришлось бы проверять ширину окна и обрабатывать события изменения размера. Честно говоря, для этого проще использовать css. Кроме того, вам не обязательно использовать класс navbar-collapse . Вы можете установить любой div в качестве сворачиваемого элемента, тогда вам не нужно переопределять существующие правила переключения панели навигации, просто создайте свои собственные.

3. я хочу, чтобы класс collapse работал синхронно с точками останова, и мне не нужно беспокоиться об управлении ими: D

Метки: