个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
我有一个 Bootstrap 3 响应式导航栏，左侧有菜单项，右侧有一个搜索框(高度 50 像素)，宽度大于 990 像素，宽度小于 765 像素(菜单缩减为图标) ), 但在这些宽度之间，搜索框会上升到菜单上方，并将导航栏高度加倍，以便它开始覆盖我的内容:
好:
差:
阻止这种行为的最佳方法是什么？ (我不想让导航栏更高。)这是我目前的代码:
<!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>
最佳答案
对于 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>关于html - 搜索框在调整大小时使导航栏的高度加倍，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52473772/
24
4
0
我想为我们的网站创建一个自定义搜索框。让它工作如下: function bookssearch(bs) { window.open('http://webpac.kdu.edu.my/s
我需要向我的搜索系统添加一个弹出窗口事件 - 当客户仅输入 2 个字符时，它应该弹出一个带有警报 e 的小表格。 G。 “搜索时必须输入至少 3 个字符...”并且背景应变灰。 这对我来说可能吗？这是
我的以下功能存在格式问题。正如您将在下面看到的，它大部分都有效，只是搜索框的格式不是我想要的(我想复制 typeahead Twitter Bootstrap 功能): 用户可以在搜索框中输入书名，在
我正在尝试使用 php 和 jquery 实现一个搜索框(搜索结果来自数据库)。我想要做的是，当用户在搜索框中键入内容时，将进行查询以查找包含用户在搜索框中输入的关键字的数据。我遇到的问题是我有这样的
我想知道为什么当我在我的计算机上本地加载 Angular 搜索框时它不起作用。我使用的是相同的代码，当我使用 codepen、plunker 或 jsfiddle 等网站时，它确实有效。它无法正常工作
我想知道如何在鼠标悬停事件上将焦点设置到输入字段。 我想知道当鼠标悬停在输入字段或焦点字段上时如何加载输入字段或焦点字段，以便在光标触摸或鼠标悬停在搜索框的输入字段上时轻松准备打字。 最佳答案 您可以
我有index.jsp，我想搜索视频，但每当我搜索时，它都会给我带来不同的错误，并且我无法获得结果，就像它应该将用户带到搜索文本所在的页面一样。 Search.java import java.io.
所以搜索就像'Ozzie Smith' 第一个表有 (username, fname, lname) = osmith, ozzie, smith 第二张表有 (username, team) = o
有什么方法可以启动/打开带有代码的搜索框，或者只需单击搜索键即可？ 最佳答案 SearchManager mgr = ((SearchManager) getSystemService(Context
废话不多说了，直接给大家贴关键代码了，具体代码如下所示： ? 1
我想制作一个具有自动建议并搜索 XML 文件中特定标签的搜索框。我怎样才能实现这一点？ 最佳答案 这取决于您所说的 XML 文件的含义。 XML 文件在某些服务器上可用吗？ 看看jQuery及其
我用javaee6和jsf2开发了一个小应用程序。我想要一个没有按钮的搜索字段(只需键入并按 Enter 键并给出结果)。我在 bean 中有一个搜索方法: public Book searchByT
首先，这个标题是我能想到的最好的标题。 我编写了一个非常短的小脚本来执行实时搜索。 它的基本原理是: (function ($) { $.fn.SearchThing = function (
我正在用 Java 创建一个简单的桌面应用程序，它显示当前正在运行的服务。我想在顶部添加一个谷歌搜索栏，可以直接在默认浏览器中打开应用中输入的关键字的谷歌搜索结果(网页)。 最佳答案 您应该从输入框中
美好的一天。我正在研究我的搜索框。我如何从多列中进行搜索。除了“id”列之外，我还有名字、姓氏、RFIDnum。我如何将它们添加到我当前的代码中。 这是我的代码: DataView dv = new
在 this site ，右上角的搜索框不起作用。 我尝试向父元素添加 z-index: .col-right-one-thirds { max-width: 22.38033333em;
我想要在 bootstrap 3+ 中带有选择选项和清除按钮的大搜索框。我尝试了下面的代码，但它没有正确对齐。
执行此代码$("input[name=q]").value = "Hello"; 应在 stackoverflow 搜索框中输入“Hello”。然而它仍然是空的。为什么？ 最佳答案 因为它应该是: $
我是新手。我尝试制作一个搜索框。当我在 Firefox 上打开它时。对我来说没关系。然后我在 IE、Chrome 和 Safari 中执行此操作。实际上并不酷。有谁知道我的问题，请帮我解决一下？ 我想
当用户加载我的页面时，浏览器中第一个激活的元素是我的菜单按钮之一。 我的页面上有一个搜索框(表单域)，我希望它成为第一个激活的东西。 我所说的“事件”是指当用户按下选项卡按钮时，它会循环浏览网站上的所
我是一名优秀的程序员,十分优秀！