个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
24
4
我正在尝试创建一个包含搜索表单的导航栏，该表单将填充 .navbar-brand 和 .navbar-collapse 内容之间的所有剩余空间.
当视口(viewport)的宽度小于 767 像素时(当导航栏的折叠样式被触发时)，我的代码工作正常。但是当视口(viewport)的宽度超过 767px 时，搜索表单变小了..
这是 html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">WebSiteName</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="sr-only"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-search_container">
<div class="full_width_div">
<div class="right_part-wrapper">
<a class="btn btn-default">z</a>
</div>
<div class="remaining-wrapper">
<form class="my-search_form-group">
<div class="input-group">
<input type="text" class="form-control" name="q" placeholder="keyword">
<span class="input-group-btn">
<button class="btn btn-default" type="submit">
a
</button>
</span>
</div>
</form> <!-- /.my-search_form-group -->
</div> <!-- /.left_part-wrapper -->
</div> <!-- /.full_width_div -->
</div> <!-- /.navbar-search_container -->
</div> <!-- /.navbar-header -->
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
</nav>
<div class="container">
<h3>Collapsible Navbar</h3>
<p>In this example, the navigation bar is hidden on small screens and replaced by a button in the top right corner (try to re-size this window).
<p>Only when the button is clicked, the navigation bar will be displayed.</p>
</div>
</body>
</html>
这是CSS:
/* css to allow a div fit remaining width
based on https://stackoverflow.com/a/5043876/1235167 */
.full_width_div {
width: 100% !important;
}
.full_width_div > .right_part-wrapper {
/* white-space: nowrap; */
float: right;
}
.full_width_div > .left_part-wrapper {
float: left;
}
.full_width_div > .remaining-wrapper {
/* white-space: nowrap; */
overflow: hidden;
}
这是 jsfiddle
在修改了开发者工具后，我发现我的代码只适用于小于 767 像素的视口(viewport)，因为 .navbar-header 在低于 767 像素时会获得“width:100%”规则。所以现在我想我需要制作 .navbar-search_container 部分来填充 .navbar-collapse 的内容留下的剩余空间。我怎么做？它们在不同的 DOM 级别和结构上。请帮忙。我已经为此工作了好几天..
最佳答案
关于html - 如何在中间使用全尺寸搜索表单制作 bootstrap 3 响应式导航栏？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50385741/
24
4
0
有人可以给我一个更简单的以下代码的解决方案(它正在展开给定结构 0xFC :: len :: payload :: ... :: 0x0A :: 0x0D 的整数列表): object Payload
我已经在我的网站上安装了 SSL 证书，但 intermediate.crt 无法正常工作。任何 SSL 检查器(例如 GeoTrust Checker)都告诉我，缺少中间 key 。网站上已经使用了
如何让图像从这个框的中间开始？ (中间纵横) 最佳答案 有几种方法可以做到这一点，如果它需要在所有浏览器(IE7+ 和其他浏览器)中工作，你需要做不同的事情来让它在某些情况下工作。 使用绝对位置
如何强制 min-height 和 vertical-align:middle 为 td 元素或其内部元素工作？ 最佳答案 td 元素上的 height 等同于 min-height，因为如果需要，表
我正在尝试自动滚动到订单簿的中间行。 我有 orderBook div，其中放置了带有 orderBook 的表。该表的其中一行有一个 id middleRow。我想做的是滚动该行并将其放置在 ord
我正在尝试在 javascript 中计算绝对定位元素的 transform-origin 属性，以便它们在悬停时填充整个视口(viewport)。 我尝试通过 x 除以窗口宽度和 y 除以窗口高度来
我有休闲字符串 ' this is my string ' 是否可以删除开头和结尾的所有空格，只在单词之间留一个空格。 要选择我使用过的所有空间: SELECT regexp_replace('
我正在设法创建我的第一个复杂的 J2E 解决方案，并且在每个教程中我都发现了某种中间表的用法，如下所示: 表:用户、用户角色、角色虽然逻辑会简单地向用户表添加一个键来引用它在角色表上的角色，但为什么要
我正在寻找以下解决方案。我想定位一个图像元素，例如 在中间。所以高度是视口(viewport)的高度，宽度会自动设置，图像的中间应该在视口(viewport)宽度的中间。 我搜索的一个例子就像下面的网
我正在设计一种布局，它更像是注册用户的个人仪表板。我让它变得简单，使用基本的 2 列网格，一个用于侧边栏，一个用于主要内容。 因为，例如，80% 的网站使用将发生在一个单独的子系统中，在无 chrom
我有三个不同的 div 标签(不在彼此内部)和代码，所以它有一个把单词放在左边、中间或右边，但中心非常偏离中心。这是 HTML 代码: .desc { float: right; color:
我有以下CSS http://jsbin.com/azivip/75/edit我想让黄色的 div 高度填充蓝色和绿色 div 之间的空间。使用高度继承似乎使 div 超出了绿色 div。 有什么想法
我不得不在其父元素的中间放置一些文本。我用下面的代码实现了它: #div1 { position: relative; margin: 0; padding: 0; } #div2 {
发现一个使用合法证书(由thawte 签名)的网站，但所有浏览器都会拒绝它。我不明白为什么。thawte 的支持告诉我一个域有两个证书，然后将这个 https://www.sslshopper[dot
我正在尝试使用 OpenSSL 创建证书链，但出于某种原因，当我在我的计算机上安装我的根 CA 并尝试验证证书链时，它总是告诉我它找不到证书的颁发者.为了让事情发生，我必须安装中间 CA，这是没有意义
我看到 REST 的一大好处是依赖 HTTP 缓存。我不是在争论这个，而是完全认同这个想法。但是，我从来没有看到对中间 HTTP 缓存的更深入的解释。 如果我将 Cache-control heade
查看此图片 Facebook Messenger Android App Buttons ( MESSENGER\ACTIVE ) 我怎样才能做到这一点？ 详细信息:- 带有 2px 红色边框的 di
我的任务是制作漂亮的文本，在文本中间加一条白线，如下图所示。是否可以使用 css 来实现？这是 Fiddle .container{ height:200px; width:400px;
在拉丁文字中，字母有大写和小写形式。在 Python 中，如果你想比较两个字符串而不考虑它们的大小写，你可以使用 'string'.upper() 或 'string'.lower() 将它们转换为相
我正在使用 awk 对文件进行一些文本处理。例如删除尾随空格。 awk '{gsub(/ +$/, "")} {print $0}' filename 这很好用。但是当我将输出重定向到原始文件时。它变
我是一名优秀的程序员,十分优秀！