twitter-bootstrap - 自定义 Bootstrap 3.0 导航栏

Question

我正在使用 Bootstrap 3.0，我想通过仅更改a标签而不是整个li来自定义导航栏链接。

我想获得类似http://templates.designorbital.com/baleen/的东西，但是当我更改背景颜色或边框时，整个 .li 标记会获得相同的样式。

帮助？

编辑：到目前为止，这就是http://jsfiddle.net/AvxSN/3/

/* link */
.navbar-default .navbar-nav > li > a {
    color: #555;

}
.navbar-default .navbar-nav > li > a:hover {
    color: #fff;
    background-color:#000;
}
.navbar-default .navbar-nav > .active > a, 
.navbar-default .navbar-nav > .active > a:hover, 
.navbar-default .navbar-nav > .active > a:focus {
    color: #fff;
    background-color: #000;
}

Answer 1

我在您提供的代码示例和您自己的代码示例中看到的唯一区别是它们在a元素上具有边距和边框半径（以及悬停时的不同背景颜色）。ain nav 是用于填充整个元素的显示块，li因此这就是为什么当您更改某些内容时它会更改整个元素，li但与示例代码相同。用几行更新你的以反映示例布局。如果我误解了你，请告诉我：

http://jsfiddle.net/spacebean/AvxSN/4/

/* updated to have same margins as nav items */
.navbar-default .navbar-brand {
    margin: 5px 0;
}
.navbar-default .navbar-nav > li > a {
    color: #555;
    margin: 5px;
    border-radius: 4px;

}
.navbar-default .navbar-nav > li > a:hover {
    color: #fff;
    background-color:#999;
}