html - 如何使用引导程序 5 在导航栏中拉伸搜索框?
问题描述
我是前端开发的新手,我正在尝试设计一个也有搜索框的页面(这里是 jsfiddle https://jsfiddle.net/he40tr9z/1/)。我从https://getbootstrap.com/docs/5.0/components/navbar/复制了导航栏组件,并做了一些最小的修改以使搜索框出现在导航项目之前并右对齐导航项目。现在我希望搜索框从导航栏品牌延伸到导航项目,但我似乎无法做到这一点。我在网上搜索过,我找到的所有解决方案都是针对以前版本的 Bootstrap,当应用于 Bootstrap 5 时,它不起作用。
这是我的代码片段:
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="images/logo.png" alt="Brand image" width="180" height="52"></img></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<form class="d-flex ms-auto me-auto">
<input class="form-control" id="searchbox" type="search" placeholder="Search" aria-label="Search"></input>
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 d-flex">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Login</a>
</li>
</ul>
</div>
</div>
</nav>
这是我的css文件中的代码:
#searchbox{
width: 100%;
}
我把width:100%
原因放在这个解决方案中看到它Bootstrap:拉伸导航栏输入框,但它不适用于 Bootstrap 5。
解决方案
只需在包含表单上使用 w-100...
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#"><img src="//via.placeholder.com/180x52" alt="Brand image" width="180" height="52"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<form class="d-flex ms-auto me-auto border w-100">
<input class="form-control" id="searchbox" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 d-flex">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Login</a>
</li>
</ul>
</div>
</div>
</nav>
推荐阅读
- python - 如何使用 python 在计数器中应用嵌套条件?
- html - 溢出时隐藏元素
- azure - 通过管理门户和 Microsoft Graph 获取不同的 Azure AD Connect 同步状态
- powershell - PowerShell:使用 Group-Object 后导出 csv 文件
- mongodb - 如何使用 scala 创建 mongoDB 连接?
- php - 如何通过 JSON 中的键查找返回值
- css - 使用 Bootstrap (Reactstrap) 在单行中显示响应式标题
- java - 为什么我的 Java 程序会忽略另一个 html 中的列表?
- java - Jenkins Git 客户端插件无法执行 FetchCommand
- c# - 当使用 WinForms 提取数据时,XML 会转换为纯文本。有没有办法维护 XML,或将其转换回 C#?