[英]target 'toggle' links in Bootstrap navigation
I am using Bootstrap 3 framework to create a nag. 我正在使用Bootstrap 3框架来创建一个nag。 I can target the regular nave with my css, but can't seem to target the links when they are in toggle/mobile mode. 我可以使用CSS定位常规中殿,但当它们处于切换/移动模式时,似乎无法定位链接。 * I am using Bootstrap CDN. *我正在使用Bootstrap CDN。 brought in from host 从主机带来
HTML 的HTML
<div class="container">
<div class="row">
<nav class="navbar navbar-custom" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-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(); ?>"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-ex1-collapse navbar-right">
<?php /* Primary navigation */
wp_nav_menu( array(
'menu' => 'top_menu',
'depth' => 2,
'container' => false,
'menu_class' => 'nav navbar-nav',
//Process nav menu using our custom nav walker
'walker' => new wp_bootstrap_navwalker())
);
?>
</div>
</nav>
</div>
</div> <!--/container -->
CSS - changing values in these fields doesn't affect the type. CSS-在这些字段中更改值不会影响类型。
.navbar-custom ul.dropdown-menu {
}
.navbar-custom .dropdown-menu li a {
}
.navbar-custom .dropdown-menu li a:hover {
background-color: red;
}
what css changes do I need to be able to style the drop down links properties 我需要进行哪些CSS更改才能设置下拉链接属性的样式
a simple bootstrap navbar , with a dropdown li
has the following structure : 具有下拉菜单li
的简单引导导航栏具有以下结构:
<li class="dropdown open">
<a aria-expanded="true" href="#lala" class="dropdown-toggle" data-toggle="dropdown">
Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="listbox">
<li><a href="#lala1" role="option">jmeter</a></li>
<li><a href="#lala2" role="option">EJB</a></li>
<li><a href="#lala3" role="option">Jasper Report</a></li>
<li><a href="#" role="option">One more separated link</a></li>
</ul>
</li>
and bootstrap uses the following selector to add styles to the dropdown items IE The a
tags in the dropdown : 并且bootstrap使用以下选择器将样式添加到下拉项中的IE a
标签中:
.dropdown-menu > li > a {
display: block;
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857;
color: #333;
white-space: nowrap;
}
The hover and focus styles like so : 悬停和焦点样式如下:
.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {
color: #262626;
text-decoration: none;
background-color: #F5F5F5;
}
Notice how bootstrap is using the > selector and you are NOT ! 请注意引导程序如何使用>选择器,而您不是! . 。
Also in mobile mode , the bootstrap selector change as follows : 同样在移动模式下,引导程序选择器的更改如下:
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
color: #777;
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus, .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover {
color: #333;
background-color: transparent;
}
So may be you can do something like : 所以也许你可以做类似的事情:
.navbar-default .navbar-nav .open .dropdown-menu > li > a:focus, .navbar-default .navbar-nav .open .dropdown-menu > li > a:hover {
// your code goes here .
}
.navbar-default .navbar-nav .open .dropdown-menu > li > a {
// your code goes here .
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.