引导：导航栏折叠时搜索可见
当导航栏崩溃时，我想让我的搜索栏可见。
我的代码：http://jsfiddle.net/edalzell/a3yng825/1/折叠时工作，但展开时显示两个搜索栏。
HTML:
<header class= "blog-masthead">
<nav class="navbar" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed pull-left" 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>
<form class="navbar-form collapsed navbar-right" role="search" action="/search" method="get">
<div class="form-group input-group">
<input type="text" class="form-control input-sm" placeholder="Search" id="sitesearch" name="query">
<span class="input-group-addon"><button type="submit" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-search"></span></button></span>
</div>
</form>
</div> <!-- navbar-header -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li><a href="/blog">Blog</a></li>
<li><a href="/about">About</a></li>
</ul>
<form class="navbar-form navbar-right" role="search" action="/search" method="get">
<div class="form-group input-group">
<input type="text" class="form-control input-sm" placeholder="Search" id="sitesearch" name="query">
<span class="input-group-addon"><button type="submit" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-search"></span></button></span>
</div>
</form>
</div> <!-- navbar-collapse -->
</div>
</nav>
</header>
共有1个答案
这是因为您声明了两个搜索栏，您有两个选项来获得所需的结果
>
隐藏/显示所需分辨率上的特定项目，您可以选中此选项
我用了第一种方法，你可以在这里找到jsfiddle
完整代码：
<header class= "blog-masthead">
<nav class="navbar" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed pull-left" 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>
<form class="navbar-form collapsed navbar-right" role="search" action="/search" method="get">
<div class="form-group input-group">
<input type="text" class="form-control input-sm" placeholder="Search" id="sitesearch" name="query">
<span class="input-group-addon"><button type="submit" class="btn btn-default btn-xs"><span class="glyphicon glyphicon-search"></span></button></span>
</div>
</form>
</div> <!-- navbar-header -->
<div class="collapse navbar-collapse" id="navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li><a href="/blog">Blog</a></li>
<li><a href="/about">About</a></li>
</ul>
</div> <!-- navbar-collapse -->
</div>
</nav>
</header>
-
问题内容： 这是我简单的导航栏： 我只是想防止这种情况崩溃，因为我不需要它，怎么办？ 我想避免编写30万行CSS来覆盖默认样式。 有什么建议吗？ 问题答案： 经过仔细检查，没有30万行，但是您需要覆盖大约3-4个CSS属性： 这样，您的菜单就不会折叠。 说明 四个CSS属性分别执行以下操作： 引导程序中的默认属性隐藏平板电脑（风景）和电话菜单的右侧，而是显示一个切换按钮以隐藏/显示它。因此，此属性
-
我使用Bootstrap4创建了这个可折叠的导航栏，它工作得很好，但我希望在用户单击链接时关闭它。有办法吗？谢谢 html导航栏： css用于。图标栏，因为引导程序4不使用图标栏类。
-
我目前有一个navbar是（我更希望它是）居中的。然而，在整个完成我的网站我完全忘记了添加一个搜索栏。我决定使用W3Schools中的代码将搜索栏合并到我的navbar的右侧，而不影响任何navbar文本（主页、游戏、办公室、结帐、联系人），并且与我的navbar在同一行上。我该如何做到这一点呢？ 这是我的标题： 标题和搜索栏的CSS代码： 到目前为止是这样的：
-
问题内容： 我使用Bootstrap 4很好地创建了这个可折叠的导航栏，但是我希望当用户单击链接时将其关闭。有什么办法吗？谢谢 html导航栏： .icon-bar的css，因为Bootstrap 4不使用icon-bar类。 问题答案： 您可以像这样将组件添加到链接。 或者 ，（也许是一种更好的方法）像这样使用jQuery。
-
问题内容： 我在用bootstrap-sass实现的Rails 3.1.2项目中使用Twitter Bootstrap 2.0.1。我正在加载和和文件，以及Javascript。 我有一个与示例类似的导航栏，布局流畅。在此之前，导航栏“响应变化”说明这里。效果很好：如果页面的宽度小于940像素，则导航栏会折叠并显示一个“按钮”，我可以单击它来展开。 但是，我的导航栏看起来不错，可宽至550像素左右
-
问题内容： 我在导航栏中做了一些修改，但是现在切换按钮在单击时没有响应。下面是我的代码。我哪里错了?? 码： 问题答案： 您需要更改此标记 改变 至 原因：的值是关联的nav div的任何类名。在这种情况下