html - 如何在 Bootstrap 4 中更改屏幕宽度的同时更改导航栏的颜色
问题描述
例如:假设我在导航标签中使用 navbar-dark 和 bg-dark,当我将屏幕宽度更改为 600px 左右时,我想将其更改为 navbar-light 和 bg-light(在 Bootstrap 4 中)
解决方案
使用 CSS 媒体查询来解决这个问题。示例代码在这里:
@media (max-width: 600px) {
.navbar-dark.bg-dark{
background-color: #ddd !important;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="#">Navbar w/ text</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
</ul>
<span class="navbar-text">
Navbar text with an inline element
</span>
</div>
</nav>
推荐阅读
- php - (PHP)如果尚未创建帖子的ID,如何将其附加到文件名?
- python - 如何获得带有句点的复杂参数的角度?
- python - 使用 json.loads() / Python 时忽略引号中的逗号?
- python - Python - 两个信号与内部 NaN 的互相关
- visual-studio-2010 - SSIS 透视数据
- maven - 无法从 docker 中的 maven repo 下载 pom 和 jars
- java - 使用某些 servlet 类时 Eclipse 编辑器中显示的错误
- javascript - 使用 jQuery 平滑滚动导航会导致奇怪的行为
- php - PHP 和 Jquery 即时搜索 SQLite 查询
- php - PHP:使用太多嵌套循环,寻找更高效的解决方案