javascript - Bootstrap 导航中的目标 'toggle' 链接

Question

我正在使用 Bootstrap 3 框架创建一个 nag。我可以用我的 css 定位常规中殿，但当它们处于切换/移动模式时似乎无法定位链接。 * 我正在使用 Bootstrap CDN。从主机引入

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 - 更改这些字段中的值不会影响类型。

.navbar-custom  ul.dropdown-menu {
}

.navbar-custom .dropdown-menu li a {
}

.navbar-custom .dropdown-menu li a:hover {
  background-color: red;
}

我需要更改哪些 css 才能设置下 zipper 接属性的样式

Answer 1

一个简单的 Bootstrap 导航栏，带有一个下拉列表 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>

并且 bootstrap 使用以下选择器将样式添加到下拉项 I.E.下拉列表中的 a 标签:

.dropdown-menu > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857;
    color: #333;
    white-space: nowrap;
}

悬停和焦点样式如下:

.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {
    color: #262626;
    text-decoration: none;
    background-color: #F5F5F5;
}

注意 bootstrap 如何使用 > 选择器，而你不是! .

同样在移动模式下， Bootstrap 选择器变化如下:

.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;
}

也许你可以这样做:

.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 . 
    }