自定义Bootstrap 3导航丸不起作用

Question

I custom nav-pills for change background in default , hover and focus Like this :

.nav-pills > li > a {
    background:#FFF;
    border-radius:0;
    color: #777;
    border-right:5px solid #DDD;
    border-top:1px solid #ddd;
    border-bottom:1px solid #ddd;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus {
    background:#f7f7f7;
    border-radius:0;
    color: #777;
    border-right:5px solid #005090;
    border-top:1px solid #ddd;
    border-bottom:1px solid #ddd;
}

But in action border-right not true work and not show in 5 pixel. how do fix this ?

DEMO : http://jsfiddle.net/Sambora/2bvkd6f7/

problem:

Answer 1

Try .nav-pills > li instead of .nav-pills > li > a . That may be what you're looking for.

  $('#myTabs a').click(function(e) { e.preventDefault() $(this).tab('show') }); 

 .book-list-cat .nav-pills > li > a { background: #FFF; border-radius: 0; color: #777; border-right: 5px solid #ddd; } .book-list-cat .nav-pills>li.active>a, .book-list-cat .nav-pills>li.active>a:hover, .book-list-cat .nav-pills>li.active>a:focus { background: #f7f7f7; border-radius: 0; color: #777; border-right: 5px solid #005090; } .book-list-cat .nav-pills > li { border-bottom: 1px solid #ddd; border-top: 1px solid #ddd; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <div class="col-md-3 book-list-cat nopadding"> <ul class="nav nav-pills nav-stacked" id="myTabs"> <li class="active"><a href="#home">information </a> </li> <li><a href="#profile">Profile</a> </li> <li><a href="#messages">Messages</a> </li> </ul> </div> <div class="col-md-9 book-details nopadding"> <div class="tab-content book-details-block"> <div class="tab-pane active" id="home">information</div> <div class="tab-pane" id="profile">Profile</div> <div class="tab-pane" id="messages">Messages</div> </div> </div> 

Answer 2

As per my understanding, you want the effects on hover too. You got the same commands for active, hover and focus. which is why you dont see the difference.

If i got you right, your css should be like this.

.nav-pills > li > a {
    background:#FFF;
    border-radius:0;
    color: #777;
    border-right:5px solid #DDD;
    border-top:1px solid #ddd;
    border-bottom:1px solid #ddd;
}
.nav-pills > li > a:hover {
   background:#f7f7f7;
    border-radius:0;
    color: #777;
    border-right:5px solid #005090;
    border-top:1px solid #ddd;
    border-bottom:1px solid #ddd;
}
.nav-pills>li.active>a, .nav-pills>li.active>a:hover, .nav-pills>li.active>a:focus {
    background:#f7f7f7;
    border-radius:0;
    color: #777;
    border-right:5px solid #005090;
    border-top:1px solid #ddd;
    border-bottom:1px solid #ddd;
}