是否可以在Bootstrap 4中更改扩展导航栏的颜色？

作者: 氷寒
发布时间: 2024-11-25 05:14:56 (3月前)
转自：

3 条回复

0#
回复此人
不浪漫 | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 加 <code> media queries </code> 实现它 </p> <P> </p> <div class =“snippet”data-lang =“js”data-hide =“false”data-console =“true”data-babel =“false”> <div class =“snippet-code”> <pre class="snippet-code-css lang-css prettyprint-override"> <code> @media (min-width: 434px) { .navbar-collapse{ background-color: red; } } @media (min-width: 768px) { .navbar-collapse{ background-color: unset; } } </code> </pre> <pre class="snippet-code-html lang-html prettyprint-override"> <code> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <nav class="navbar navbar-expand-md navbar-light bg-light"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav w-75 m-auto justify-content-around"> <a class="nav-item nav-link active" href="#">Over ons <span class="sr-only">(current)</span></a> <a class="nav-item nav-link" href="#">Assortiment</a> <a class="nav-item nav-link" href="#">Specialiteiten</a> <a class="nav-item nav-link" href="#">Contact</a> </div> </div> </nav> </code> </pre> </DIV> </DIV> <P> </p> </DIV>

编辑
1#
回复此人
十二* | 2019-08-31 10-32

<div class =“post-text”itemprop =“text”> <P> 使用与。对应的媒体查询 <code> navbar-expand-md </code> 断点... </p> <pre> <code> @media(max-width: 768px) { .navbar.bg-light { background-color: red !important; } } </code> </pre> <P> <a href="https://www.codeply.com/go/Fzyc7GE495" rel="nofollow noreferrer"> https://www.codeply.com/go/Fzyc7GE495 </A> </p> <P> 这将改变整个导航栏的颜色，而不仅仅是折叠部分。请注意，您需要使用 <code> !important </code> 因为你正在使用 <code> bg-light </code> 。默认情况下，Navbar没有颜色，因此您无需使用 <code> bg-light </code> 除非您需要Navbar在更大的屏幕宽度上使用颜色。 </p> </DIV>

编辑

登录后才能参与评论