Bootstrap 4:在移动导航栏中扩展搜索输入
Bootstrap 4是一种流行的前端开发框架，它提供了丰富的CSS和JavaScript组件，用于快速构建响应式和现代化的网页设计。在移动导航栏中扩展搜索输入是一种常见的需求，可以通过以下步骤实现：
- 创建导航栏：使用Bootstrap提供的导航栏组件创建一个基本的导航栏结构。可以使用
<nav>元素和navbar类来定义导航栏。 - 添加搜索输入框：在导航栏中添加一个搜索输入框，可以使用
<input>元素和form-control类来创建一个具有样式的输入框。 - 扩展搜索输入框：为了在移动设备上更好地展示搜索输入框，可以使用Bootstrap提供的响应式工具类来实现扩展效果。可以使用
d-flex类和flex-grow-1类将搜索输入框设置为自动扩展。
以下是一个示例代码：
<nav class="navbar navbar-expand-md navbar-light bg-light">
<a class="navbar-brand" href="#">Logo</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
</ul>
<form class="form-inline ml-auto">
<input class="form-control mr-sm-2 flex-grow-1" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>在这个示例中，导航栏使用了Bootstrap提供的navbar类和navbar-expand-md类来定义一个响应式的导航栏。搜索输入框使用了form-control类来设置样式，并且使用了flex-grow-1类来实现自动扩展。
推荐的腾讯云相关产品：腾讯云服务器（CVM）和腾讯云对象存储（COS）。
- 腾讯云服务器（CVM）：提供可扩展的云服务器实例，适用于各种规模的应用程序和工作负载。了解更多信息，请访问腾讯云服务器产品介绍。
- 腾讯云对象存储（COS）：提供安全、可靠、低成本的对象存储服务，适用于存储和管理大量非结构化数据。了解更多信息，请访问腾讯云对象存储产品介绍。
请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求和项目要求进行评估。
相关·内容
我正在尝试建立一个带有搜索输入和下拉切换按钮的导航栏，但搜索输入似乎被限制在200px。看下面的截图，我试图消除输入和切换之间的差距，我已经尝试了w-100，但没有任何运气。
浏览 16提问于2021-08-25得票数 0
1回答
我更新到ng-bootstrap的v1.0-beta。现在导航栏总是折叠的。当我点击汉堡切换菜单时，它会打开，但内容是垂直显示的，而不是水平显示的。我的理想结果是，菜单只在屏幕小于一定大小时出现，就像过去一样。
我确实看到了。我已经打开了这个问题，因为它不包括ng-bootstrap。
浏览 2提问于2017-08-30得票数 19
回答已采纳
1回答
我似乎对小视图中的Bootstrap折叠下拉功能有一个奇怪的问题。我在XS和S视图的标题中都有图标，在XS中，点击这些图标将扩展功能，而在S中，这些下拉菜单已经打开，如果我尝试点击与下拉菜单交互的按钮，我会得到一个奇怪的动画。
Iv注意到关闭显示：！重要；在引导css (浏览器调试器)中的导航栏-折叠。似乎可以解决这个问题--然而，无论出于什么原因，这都是一个糟糕的修复方法--我不知道如何在我的自定义样式表中
浏览 1提问于2015-10-16得票数 3
1回答
因此，我在Visual studio中启动了一个基本的angular 5项目。在其中，它创建了一个名为nav-menu-component的组件。它配备了一个标准的导航菜单和移动选项，当屏幕小于726px时，它就会改变。 然而，我正在尝试让移动视图一直是默认视图(即我想要一个带有按钮的水平条，无论屏幕宽度如何，它都可以展开和折叠菜单)。CSS，尤其是bootstrap是我最薄弱的地方。请任何人可以帮助解释为什么按钮只会出现时，屏幕小于726px，让我知道。我确实知道@media是如何工作
浏览 16提问于2020-06-03得票数 0
回答已采纳
我使用的是默认的Twitter Bootstrap响应式导航栏(从移动设备开始)。我希望菜单随着导航栏宽度的扩展而不断填充。我当前的导航(非常适合移动设备)但是，随着宽度的增加，我想用更多的菜单项填充列表。[ menu item 1 | menu item 2 | menu item 3 | menu item 4
浏览 0提问于2016-02-06得票数 0
所以，我刚刚开始使用Bootstrap 3，我希望我的头部固定在顶部，其中的内容与body中的内容垂直对齐，最后，响应。我知道这可能是一个非常基本的错误，但在这里点击这个孩子，不起作用：我想我的头中的类可能做错了什么。href="#"> Logout </a> </li>
浏览 1提问于2013-09-24得票数 9
回答已采纳
我将react与bootstrap一起使用(不是react-bootstrap)，并在导航栏上工作。一定宽度(<768px)的导航栏变成了一个移动导航栏，其中包含折叠视图中的链接，你可能已经知道了。
有没有办法找出它是否在移动视图中？我有一个搜索按钮，我希望onclick事件在每个视图中是不同的。
浏览 3提问于2016-07-15得票数 1
我正在工作的网站没有使用桌面版的Bootstrap导航栏，而是利用了移动版的响应式导航栏(并隐藏了自定义导航)。导航栏没有实际的链接，甚至在桌面版本中也存在，显示品牌推广和搜索表单。然而，问题是该网站最终有三种导航类型：
1)自定义导航单元，桌面版使用。2)带有切换按钮的折叠导航栏3)大多数平板电脑上默认的“<
浏览 1提问于2013-06-09得票数 1
1回答
引导程序4中的导航栏
、、、
我有一个用Bootstrap 4制作的网页。在移动视图中，导航栏切换器没有进入导航栏，如下面的截图所示：这是该网页的。我想知道我需要在样式表中做什么更改，以便导航栏和导航栏切换器在移动视图上看起来很好。此时，导航栏切换器正在从导航栏中出来，如上面
浏览 17提问于2017-08-28得票数 0
目前，我的网站: www.pctbu.com的移动设备的导航栏崩溃，我遇到了麻烦。<?nav-pills nav-justified navbar-inverse',
'container&#x
浏览 4提问于2014-08-18得票数 0
回答已采纳
Requirements使用Bootstrap输入组组件在导航栏中创建搜索输入字段。a.Create表单并对齐到导航栏的右侧，表单标记应该包含在Bootstrap类的输入组中。b.属于表单控件的输入字段应该有占位符"Search“。创建一个span标记，对输入搜索字段的输入字段按钮进
浏览 8提问于2021-03-25得票数 0
1回答
我有下面的搜索导航栏，其中的链接显示在搜索栏的右侧。这在PC上运行良好，但在android或Iphone设备上不起作用。我已经在这里看到了答案，并尝试使用.navbar-header并将链接封装在.collapse类中，但它不起作用，它只是将所有内容都放在新的一行上，搜索栏直接穿过屏幕，不适合页面-> https://stackoverflow.com</ul>
浏览 64提问于2021-01-31得票数 0
回答已采纳
2回答
我正在使用Bootstrap为我的父母创建一个博客。对于导航栏，我使用Bootstrap navs nav-tab，如下所示： ...</ul>
我想添加一个搜索栏，例如您可以包括在导航栏中，但我找不到任何其他人试图这样做的证据，所以可以将搜索输入</em
浏览 9提问于2017-07-13得票数 0
我创建了一个应用程序，其中搜索功能是最重要的部分。因此，我决定将搜索表单放在标题栏中，以使其在每个页面上都可用。效果很好，只有在移动设备上，我有一个问题，流畅的布局导致搜索字段覆盖了大部分屏幕。因此，在移动设备上折叠这个标题栏会很棒，就像导航栏一样。不幸的是，我没有让它工作。我试着用导航栏解决这个问题，但根本不起作用(见下文)。
浏览 4提问于2015-12-16得票数 2
我的推特引导网站是www.airterrariums.com.au
在响应模式下，如何让菜单自动展开而不是折叠。
浏览 1提问于2014-03-11得票数 0
我正在使用bootstrap 3创建我的导航栏。我还需要在导航栏上放置一个搜索栏。，输入框变得更大，而不是像栈的搜索栏那样向左移动。1s ease-in-out; transition: width 1s ease-in-out;但是输入框的宽度会向右移动，移到
浏览 0提问于2013-11-07得票数 5
回答已采纳
我正在使用Django和Bootstrap4创建一个小的web应用程序。在Django的项目文件夹中，我有模板，其中一个是基本模板。其他模板扩展了基本模板。我已经将Bootstrap CDN添加到基本模板中，并且工作正常。我已经创建了Bootstrap导航栏，当调整到屏幕大小时，它会得到一个下拉列表。问题是，当我单击一个导航链接时，它会将其href中的路径添加到浏览器中</
浏览 2提问于2020-02-18得票数 0
我正在尝试建立一个web应用程序与顶部的导航栏与一些选项。然而，当在移动设备上查看网站时，导航栏缩小，并出现一个图标，供用户按下以显示选项。与本网站中显示的行为完全相同我试过bootstrap 4的例子，但是它们在angular 2上似乎不能很好地工作(Dropdown不工作)。这就是我发现angular团队实际上一直在开发
浏览 4提问于2017-01-19得票数 3
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
