html - Bootstrap,在导航栏折叠时使搜索栏全宽
问题描述
我正在处理有关创建网站的任务。我想让导航栏中包含的搜索栏在导航栏折叠时占据全宽,但在不折叠时不影响视觉效果。
这是 HTML 和 CSS:
<!-- Bootstrap nav bar! :D -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="index.html">
<img src="Fernando Borea - Logo.png" alt="" class="d-inline-block align-top headerLogo">
</a>
<!-- Folded nav bar button when small screen:B -->
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
<span>Menu</span>
</button>
<!-- Nav bar itself! -->
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#home-cats">Cats!</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#home-cars">Cars</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#home-business">Business</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Extended pages
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Cats!</a>
<a class="dropdown-item" href="#">Sports</a>
<a class="dropdown-item" href="#">Business</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Cat Trivia!! :D</a>
</div>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2 large-input quick-google ml-auto" type="search" placeholder="Wanna google somethin'?" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Google dis' pls</button>
</form>
</div>
</nav>
关于 CSS,我希望搜索栏足够长以适合占位符,这就是我使用最小宽度 CSS 的原因。我读到 width:100% 可以提供帮助,但在我的情况下没有。
/* CSS for the image */
.headerLogo
{
max-width: 200px;
height: auto;
}
.quick-google
{
min-width: 250px;
width: 100%;
}
当前代码的视觉参考:
折叠时搜索栏的当前外观。我希望它占据全宽
未折叠时的当前外观。我想要它就在那里
我是网络开发的新手,所以如果可能的话,我会非常感谢您快速解释解决方案如何工作:)
解决方案
我认为您正在尝试更改引导元素的 CSS 尝试使用带有类 Name 的 !important 标签,
.quick-google
{
min-width: 250px;
width: 100% !important;
}
推荐阅读
- symfony - FOSElasticaBundle 用户索引
- java - 没有响应类型的 Spring Boot RestTemplate 帖子
- php - 将数据发布到当前页面进行验证,并将发布数据传递到第二页进行处理
- c - 在 C 中逐行读取但长度不正确
- java - 在角度中使用 aria-hidden=true 的意义
- neo4j - 我如何计算NEO4j中的连接关系数?
- android - 返回到“导航架构组件”中的同一选项卡时,嵌套片段的状态会丢失
- imagemagick - 如何在 perl 5.16 WebService::AntiCaptcha 中安装模块
- java - WAR 文件的 Azure 部署显示空白页
- php - Laravel 文件系统 sftp 缓存适配器