个人中心
gpt4 book ai didi

html - 在保持切换菜单(汉堡包)的同时更改导航栏背景颜色

转载 作者：太空宇宙 更新时间：2023-11-04 06:02:53 25 4
gpt4 key购买 nike

我想为我的导航栏设置自定义颜色 (#5f788a)，但是，据我所知，为了在移动版本中使用切换菜单，导航栏类必须是 navbar-light或 navbar-dark(根据 Bootstrap)。当然，这会覆盖我的自定义导航栏颜色，看起来我必须在汉堡菜单或我的自定义颜色之间进行选择。

我尝试过的事情:

1).使用 ! important 在 CSS 中覆盖样式；2).在 CSS 中使用 background-color 属性进行样式化；3).造型主体，但这会影响其余站点颜色，而不仅仅是导航栏。

这是 CSS:

body {
  background: #fafafa;
  color: #333333;
  margin-top: 5rem;
}

h1, h2, h3, h4, h5, h6 {
  color: #444444;
}

.bg-steel {
  background-color: #5f788a;
}

.site-header .navbar-nav .nav-link {
  color: #5f788a;
}

.site-header .navbar-nav .nav-link:hover {
  color: #ffffff;
}

.site-header .navbar-nav .nav-link.active {
  font-weight: 500;
}


.content-section {
  background: #ffffff;
  padding: 10px 20px;
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin-bottom: 20px;
}

.article-title {
  color: #444444;
}

a.article-title:hover {
  color: #428bca;
  text-decoration: none;
}

.article-content {
  white-space: pre-line;
}

.article-img {
  height: 65px;
  width: 65px;
  margin-right: 16px;
}

.article-metadata {
  padding-bottom: 1px;
  margin-bottom: 4px;
  border-bottom: 1px solid #e3e3e3
}

.article-metadata a:hover {
  color: #333;
  text-decoration: none;
}

#parent {
    list-style: none;
    width: 100%;
    height: 90px;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

.article-svg {
  width: 25px;
  height: 25px;
  vertical-align: middle;
}

.account-img {
  height: 125px;
  width: 125px;
  margin-right: 20px;
  margin-bottom: 16px;
}

.account-heading {
  font-size: 2.5rem;
}

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");

以及网站的:

<body>
    <header class="site-header">

      <nav class="navbar navbar-default navbar-expand-md navbar-light fixed-top">
        <div class="container">

          <a class="navbar-brand mr-4" href="/">Company Name (v0.01)</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarToggle">
            <div class="navbar-nav mr-auto">
              <a class="nav-item nav-link" href="/about">About</a>
            </div>

<!--            SEARCH BOX-->
<!--            <form class="form-inline my-2 my-lg-0">-->
<!--              <input class="form-control mr-sm-1" id="search_box" type="search" placeholder="Find some stuff..." aria-label="Search" align="middle">-->
<!--              <a href="{{ url_for('search_posts', keyword='sdf' ) }}"><button class="btn btn-outline-light my-2 my-sm-0 mr-5" type="submit" align="center">Search</button></a>-->
<!--            </form>-->

            <!-- Navbar Right Side -->
            <div class="navbar-nav">
                {% if current_user.is_authenticated %}
                    <a class="nav-item nav-link" href="/post/new">New Post</a>
                    <a class="nav-item nav-link" href="/send_invites">Invite</a>
                    <a class="nav-item nav-link" href="/account">My Account</a>
                    <a class="nav-item nav-link" href="/logout"><span class="glyphicon glyphicon-log-in"></span> Logout</a>
                {% else %}
                    <a class="nav-item nav-link" href="/login"><span class="glyphicon glyphicon-log-in"></span> Login</a>
                    <a class="nav-item nav-link" href="/register"><span class="glyphicon glyphicon-user"></span> Register</a>
                {% endif %}

            </div>
          </div>
        </div>
      </nav>

    </header>

难道我应该尝试为 body 设计造型吗？如果是这样，那会不会影响站点的其余部分，而不仅仅是导航栏？感谢您的帮助

最佳答案

navbar-light 和 navbar-dark 是辅助类，它们所做的是将文本的颜色从白色(如果是 navbar-dark)更改为黑色(如果是 navbar-light)，这样导航栏上的文本颜色就不会'与导航栏颜色冲突你可以这样做:

    .navbar {background-color: #5f788a;}

并将“navbar-dark”类添加到您的导航元素。

假设您使用的是最新版本的 Bootstrap 4.3

下面是 Bootstrap 4.0.0 演示:

body {
  background: #fafafa;
  color: #333333;
  margin-top: 5rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #444444;
}

.bg-steel {
  background-color: #5f788a;
}

.site-header .navbar-nav .nav-link {
  color: #5f788a;
}

.site-header .navbar-nav .nav-link:hover {
  color: #ffffff;
}

.site-header .navbar-nav .nav-link.active {
  font-weight: 500;
}

.content-section {
  background: #ffffff;
  padding: 10px 20px;
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin-bottom: 20px;
}

.article-title {
  color: #444444;
}

a.article-title:hover {
  color: #428bca;
  text-decoration: none;
}

.article-content {
  white-space: pre-line;
}

.article-img {
  height: 65px;
  width: 65px;
  margin-right: 16px;
}

.article-metadata {
  padding-bottom: 1px;
  margin-bottom: 4px;
  border-bottom: 1px solid #e3e3e3
}

.article-metadata a:hover {
  color: #333;
  text-decoration: none;
}

#parent {
  list-style: none;
  width: 100%;
  height: 90px;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.article-svg {
  width: 25px;
  height: 25px;
  vertical-align: middle;
}

.account-img {
  height: 125px;
  width: 125px;
  margin-right: 20px;
  margin-bottom: 16px;
}

.account-heading {
  font-size: 2.5rem;
}

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css");
<!DOCTYPE html>
<!-- saved from url=(0044)https://stack.fleeksite.com/bootstrap-navbar -->
<html lang="en">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>TurboTobias</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>
  <header class="site-header">

    <nav class="navbar navbar-default navbar-expand-md navbar-dark fixed-top" style="background-color: rebeccapurple;">
      <div class="container">

        <a class="navbar-brand mr-4" href="https://stack.fleeksite.com/">Bench of Thoughts (v0.01)</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
        <div class="collapse navbar-collapse" id="navbarToggle">
          <div class="navbar-nav mr-auto">
            <a class="nav-item nav-link" href="https://stack.fleeksite.com/about">About</a>
          </div>

          <!-- Navbar Right Side -->
          <div class="navbar-nav">

            <a class="nav-item nav-link" href="https://stack.fleeksite.com/login"><span class="glyphicon glyphicon-log-in"></span> Login</a>
            <a class="nav-item nav-link" href="https://stack.fleeksite.com/register"><span class="glyphicon glyphicon-user"></span> Register</a>


          </div>
        </div>
      </div>
    </nav>

  </header>





</body>

</html>

关于html - 在保持切换菜单(汉堡包)的同时更改导航栏背景颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57124869/

25 4 0
文章推荐： python - 为什么不添加 X-Appengine-Inbound-Appid header ？
文章推荐： linux - 无法在centos 6上安装vsftpd
文章推荐： c - 如何在C函数中使某些参数可选
文章推荐： python - 有什么方法可以远程发出 telnet 命令和双 telnet session 吗？