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

Question

我自定义nav-pills以了解default，hover和focus中的更改背景，如下所示：

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

但在行动中border-right不是真正的工作而不是以5像素显示。怎么解决这个问题？

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

问题：

Answer 1

尝试使用.nav-pills > li代替.nav-pills > li > a。这可能是你正在寻找的。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

根据我的理解，你也希望悬停的效果。你有相同的命令用于活动，悬停和焦点。这就是为什么你没有看到差异。

如果我说得对，那你的CSS应该是这样的。

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