Создать складную панель заголовка в Bootstrap (без навигации)

Question

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

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

Еще одна моя идея заключалась в создании двух разных поисковых баров, рухнувших и скрытых, а также использования классов Bootstrap .hidden- * и .visible- *. Не уверен, как это будет выполняться, кроме того, я еще не понял, как создать не-навигационную строку заголовка в Bootstrap.

<nav class="navbar navbar-inverse navbar-fixed-top"> 
    <div class="container-fluid col-md-12"> 
     <div class='row'> 
      <div class='col-md-8'> 
       <div class="navbar-header">   
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> 
         <span class="sr-only">Toggle navigation</span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
         <span class="icon-bar"></span> 
        </button> 
        <a class="navbar-brand" href="./index.php">Home</a> 
       </div> 
       <form method='post' class='form-inline' role='form' action='./search.php'> 
        <div id='menu' style='display:table-cell;vertical-align:middle;padding:10px;'> 

         <!-- several form elements (search boxes) go here --> 

        </div> 
       </form> 
      </div> 
      <div class='col-md-4' style='padding-top: 7px;'> 

        <!-- Session & status information go here --> 

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

Любая идея, как я могу показать свои поля поиска на больших экранах и свернуть их на мобильных устройствах?

Answer 1

Вы не дали нам много работы, но, насколько это происходит, я бы пошел на комбинацию css и jQuery. Вот суть того, как я буду решать эту проблему, просто создав собственный небольшой «бутстрапоподобный» коллапс.

html: Создайте свою собственную навигационную структуру с помощью кнопки, которая отобразит вашу форму на мобильных устройствах.

<ul class="search-nav"> 
    <li class="collapse-button">ICON</li> 
    <li class="search-form"> 
     <form method='post' class='form-inline' role='form' action='./search.php'> 
       <div id='menu' style='display:table-cell;vertical-align:middle;padding:10px;'> 

        <!-- several form elements (search boxes) go here --> 

       </div> 
      </form> 
    </li> 
</ul> 

css: Сделать кнопку коллапса не отображаться на устройствах с большим экраном. На устройствах небольшого экрана может отображаться кнопка свернуть, но форма должна быть скрыта по умолчанию. Все это может быть достигнуто с помощью медиа запросов: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

.collapse-button{ 
    display: none; 
} 

.search-form{ 
    display: block; 
} 

@media (max-width: 480px){ 
    .collapse-button{ 
     display: block; 
    } 

    .search-form{ 
     display: none; 
    } 
} 

JQuery: Если пользователь нажимает на коллапс кнопки форма будет переключать между отображается и нет. Что-то вроде этого:

$(".collapse-button").click(function() { 
    $(".search-form").toggle(function() { 
    $(".search-form").css("display","block"); 
    }, function() { 
    $(".search-form").css("display","none"); 
    }); 
}); 

Это просто общая идея. Вероятно, я бы на самом деле пошел с установкой max-height формы в 0 и переполнением: скрытым на устройствах с маленьким экраном и большей максимальной высотой на устройствах с большим экраном. Таким образом, вы можете добавить переход css, который сделает его более гибким.