javascript - 自定义 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 像素显示。如何解决这个问题？

演示:http://jsfiddle.net/Sambora/2bvkd6f7/

问题:

Answer 1

尝试 .nav-pills > li而不是 .nav-pills > li > a .这可能就是您正在寻找的。

	$('#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>