在保持切换菜单的同时更改导航栏背景颜色（汉堡）

时间：2019-07-20 12:46:28

标签： html css twitter-bootstrap bootstrap-4

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

我尝试过的事情：

1）。在CSS中使用! important覆盖样式； 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>

可能是我应该尝试对身体进行样式设计吗？如果是这样，那不仅会影响导航栏吗？谢谢您的帮助

2 个答案:

答案 0 :(得分：1)

navbar-light和navbar-dark是帮助程序类，它们的作用是将文本的颜色从白色（如果为navbar-dark）更改为黑色（如果为navbar-light），以便导航条上的文本颜色不与导航栏颜色不冲突 您可以这样做：

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

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

这是假设您使用的是最新版本的引导程序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>

答案 1 :(得分：0)

您可以添加：-

class Queue
{
    public Lazy<Task> Task;
    public Queue(Func<Task> taskFactory)
    {
        Task = new Lazy<Task>(taskFactory);
    }
}

// in your Add method:    
var queue = new Queue(taskFactory);
await queue.Task.Value;

// Add call:
q.Add(() => AsyncFunction(param1, param2), "idExample", new CancellationTokenSource())

代替您之前的内容

相关问题
最新问题