搜索框在調整大小時將導航欄的高度加倍

Question

我有一個Bootstrap 3響應式導航欄，左側帶有菜單項，右側是一個搜索框，其寬度大於990px且寬度小於765px（菜單縮小為一個圖標）時看起來不錯（高度50px），但是在這些寬度之間，搜索框會上升到菜單上方，並使導航欄的高度加倍，從而開始覆蓋我的內容：

好：

壞：

阻止這種行為的最佳方法是什么？ （我不想讓導航欄更高。）這是我目前的代碼：

<!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>

Answer 1

您需要為其屏幕991px至767px添加自定義css

 @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>

搜索框在調整大小時將導航欄的高度加倍

問題描述

1 個解決方案

解決方案1
1 2018-09-24 06:55:57

搜索框在調整大小時將導航欄的高度加倍

問題描述

1 個解決方案

解決方案1 1 2018-09-24 06:55:57

解決方案1
1 2018-09-24 06:55:57