Раскрывающееся меню/поисковая строка bootstrap

Question

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

A) Я скрывал кнопку ввода ввода/отправки в горизонтальной навигационной панели, когда экран равен < 820px и включает в себя другой раскрывающийся список с именем «поиск» с полем ввода в раскрывающемся списке, что прекрасно.

Но я пытаюсь скрыть это раскрывающееся окно поиска до тех пор, пока экран не будет < 820px и нацелиться на этот список с классом и display: none, но он по-прежнему отображается. В любом случае, вы можете это сделать?

<li class="dropdown searchDropDown"> 
    <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Search<span class="caret"></span></a> 
     <ul class="dropdown-menu" role="menu"> 
      <li> 
       <input type="text" class="form-control searchBox" placeholder="Search"> 
       <button type="submit" class="btn btn-default">Submit</button> 
      </li> 
     </ul> 
</li> 

моего .searchDropDown {display:none} и есть медиа-запрос для максимальной ширины 820px display: block Но проблема в том, что не скрывает этот класс списка в полном размере страницы.

B) когда я нажимаю раскрывающееся меню поиска и пытаюсь щелкнуть по полю ввода поиска, но он теряет фокус и рулон обратно.

Answer 1

B) Ваш щелчок, распространяющийся выше литий, который имеет событие щелчка присоединенную к нему, можно добавить функцию, как это (JQuery)

$('.searchBox').click(function(e){ 
e.stopPropagation(); 
}); 

, если это не сработает, убедитесь, что вы на самом деле нажимаете на вход, а не на другой элемент.

Я вернусь к А через минуту

Answer 2

На вопрос А использование

@media screen and (min-width: 820px) { 
    .searchDropDown { 
    display: none!important; 
    } 
} 

Кроме того, не забудьте закрыть ваши img и input теги