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
Collapsed navbar drop down color
提问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
回答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> </div>
<div id="fragment-identifier-target-1>lorum ipsum</div>
<div class=bottom-margin-spacer> </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
如果您认为这是一个很好的答案,请标记为答案

