twitter-bootstrap 折叠的导航栏下拉颜色

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/22867050/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-21 20:26:04  来源:igfitidea点击:

Collapsed navbar drop down color

csstwitter-bootstrapcolorsnavbar

提问by Ben

I am using bootstrap navbar-fixed-top and have set to always be collapsed.

我正在使用 bootstrap navbar-fixed-top 并设置为始终折叠。

I would like the color of the drop down to be a different colour to that of the main navbar, a bit like the nag on this site: http://wearehanno.com/

我希望下拉菜单的颜色与主导航栏的颜色不同,有点像这个网站上的唠叨:http: //wearehanno.com/

Any ideas on how to achieve this?

关于如何实现这一目标的任何想法?

 <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="<?php echo home_url(); ?>/"><?php bloginfo('name'); ?></a>
    </div>

    <nav class="collapse navbar-collapse" role="navigation">
      <?php
        if (has_nav_menu('primary_navigation')) :
          wp_nav_menu(array('theme_location' => 'primary_navigation', 'menu_class' => 'nav navbar-nav'));
        endif;
      ?>
    </nav>
  </div>

.navbar-brand {
  display: block;
  background: url(../img/logo.svg) no-repeat;
  text-indent: -9999px;
  height: 54px;
  width:216px;
  margin-top:10px;
  background-position:center; 
}

.navbar-collapse { background:#333333; }

@grid-float-breakpoint:     9999px;

回答by Derek S

Add the following rule to your CSS.

将以下规则添加到您的 CSS。

.navbar-collapse { background:#cccccc; /*replace with desired color*/ } 

To make the background full-width on larger screens, add:

要在大屏幕上使背景全宽,请添加:

@media(min-width: 768px){
    .navbar > .container { max-width: 100%; padding: 0; }
}

Demo

演示

回答by ClintonGallagher

I have the exact opposite problem and need my navigation to move the target up where it normally would be. Anybody ready to take on a tougher fragment identifier navbar challenge please see stackoverflow: http://bit.ly/1avVcwf

我有完全相反的问题,需要我的导航将目标向上移动到通常的位置。任何准备接受更严格的片段标识符导航栏挑战的人请参阅 stackoverflow:http: //bit.ly/1avVcwf

While I was trying to solve my problem I started using divs to move the results of targets up and down the page as divs are block elements by default and I wrote the div immediately before the intended fragment identifier target like this:

当我试图解决我的问题时,我开始使用 div 在页面上下移动目标的结果,因为默认情况下 div 是块元素,我在预期的片段标识符目标之前立即编写了 div,如下所示:

.bottom-margin-spacer{
  margin-bottom: 1rem;
}
<div class=bottom-margin-spacer>&nbsp;</div>
<div id="fragment-identifier-target-1>lorum ipsum</div>
<div class=bottom-margin-spacer>&nbsp;</div>
<div id="fragment-identifier-target-2>lorum ipsum</div>

As I recall I was successful to keep targets "pushed" down but I am still not successful to have the targets positioned at the top of the page. So I only mention my own problem because I learned how to solve the question being asked by Brandon and offer my solution as one of several which can reposition the target downwards.

我记得我成功地将目标“推”了下来,但我仍然没有成功地将目标定位在页面顶部。所以我只提到我自己的问题,因为我学会了如何解决 Brandon 提出的问题,并将我的解决方案作为可以重新定位目标的几个解决方案之一。

As for the question about how to extend the dropdown menu of a navbar that is answered here at stackoverflow. I saw it yesterday and so can anybody else by learning to use search using [bootstrap] tag and string literals like "navbar" and "dropdown menu"

至于关于如何扩展导航栏下拉菜单的问题,这里在 stackoverflow 上得到了回答。我昨天看到了它,其他任何人都可以通过学习使用 [bootstrap] 标签和字符串文字(如“导航栏”和“下拉菜单”)使用搜索

If you think this is a good answer please mark as an answer

如果您认为这是一个很好的答案,请标记为答案