Question

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

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

帮助？

的结果

/* 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元素上具有边距和边框半径（以及悬停时的不同背景颜色）。导航中的a是显示块以填充整个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;
}

自定义Bootstrap 3.0 Navbar

1 个答案: