Поле поиска удваивает высоту навигационной панели при изменении размера - PullRequest
Новая
       9

Поле поиска удваивает высоту навигационной панели при изменении размера

0 голосов
/ 24 сентября 2018

У меня есть отзывчивая навигационная панель Bootstrap 3 с элементами меню слева и окном поиска справа, которое отлично смотрится (высота 50 пикселей) при ширине более 990 пикселей и ширине менее 765 пикселей (меню уменьшается до значка), но между этими значениями ширины поле поиска поднимается над меню и удваивает высоту панели навигации, чтобы оно начинало покрывать мое содержимое:

Хорошо:

enter image description here

Плохо:

enter image description here

Как лучше всего остановить это поведение?(Я не хочу делать панель навигации выше.) Вот мой код на данный момент: 

<!doctype html>
<html lang="en">

<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test page</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>

<body id="body" style="padding-top: 50px;">

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container nav-container">
<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <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="navbar-collapse collapse">

<form action="/search/" class="navbar-form navbar-right" role="search">
<div class="form-group">
    <input class="form-control" placeholder="Search" type="text" name="q" value="">
</div>

    <div class="form-group">
    <select class="form-control" name="type">
        <option value="">Everything</option>
        <option value="blog.BlogPost" >Blog posts</option>
    </select>
    </div>
<input type="submit" class="btn btn-default" value="Go">
</form>

<ul class="nav navbar-nav">
<li class="active"><a href='#'>Home</a></li>
<li><a href='#'>Item One</a></li>
<li><a href='#'>Item Two</a></li>
<li><a href='#'>Another Item</a></li>
<li><a href='#'>About</a></li>
</ul>

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


<div class="front-page-container">
<h1>MAIN HEADING</h1>
<h2>Sub-heading</h2>

</div>
</body>
</html>

1 Ответ

0 голосов
/ 24 сентября 2018

Вам нужно добавить пользовательский CSS для экрана от 991px до 767px 

@media (max-width: 991px) and (min-width: 767px){
.navbar .container {
    width: 100%!important;
}
.navbar-form .form-group {
    width: 120px;
}
.nav>li>a {
    padding: 10px 10px;
}
.navbar-form .form-control{
width:100%!important;}
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

<body id="body" style="padding-top: 50px;">

<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container nav-container">
<div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <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="navbar-collapse collapse">

<form action="/search/" class="navbar-form navbar-right" role="search">
<div class="form-group">
    <input class="form-control" placeholder="Search" type="text" name="q" value="">
</div>

    <div class="form-group">
    <select class="form-control" name="type">
        <option value="">Everything</option>
        <option value="blog.BlogPost" >Blog posts</option>
    </select>
    </div>
<input type="submit" class="btn btn-default" value="Go">
</form>

<ul class="nav navbar-nav">
<li class="active"><a href='#'>Home</a></li>
<li><a href='#'>Item One</a></li>
<li><a href='#'>Item Two</a></li>
<li><a href='#'>Another Item</a></li>
<li><a href='#'>About</a></li>
</ul>

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


<div class="front-page-container">
<h1>MAIN HEADING</h1>
<h2>Sub-heading</h2>

</div>
</body>
...