Bootstrap 导航栏定制设计答案

【问题标题】：Bootstrap Navbar custom designBootstrap 导航栏定制设计
【发布时间】：2014-02-08 22:09:07
【问题描述】：

我的引导系统有一些问题。我已经使用了一段时间，但它似乎总是有点平原。导航栏只是普通的一种颜色，甚至是一点渐变。但我想知道我是否可以让我的导航栏像这样：CoinURL - Bitcoins 我似乎在互联网上找不到任何解释如何让它看起来像导航栏的东西。我只需要在活动链接的顶部添加那条额外的线。

提前致谢。

编辑：已修复，这是在以下人员的帮助下修复的：https://stackoverflow.com/users/1529485/nix 解决方案很简单，将其添加到您的 CSS 自定义设计文件中：

.navbar-fixed-top { border-bottom: 2px solid rgb(11, 166, 240); } .navbar-default .navbar-nav > .active > a { border-top: 3px solid white; } .navbar-default .navbar-nav > .active > li { background: #fff; }

【问题讨论】：

在导航 UL 中添加border-bottom，在列表项中添加border-top。 GIYF。
对不起，你能给我一些代码吗？我似乎无法得到这个。我发现 CSS 有点混乱，而我认为设计可能不是我的朋友 :(
嗯，当然。其他的解决方案似乎不适合你，你改变了导航结构的结构吗？
实际上，它更像是一个 gpEasy CMS，因此编辑它是一个 BIT 困难。你可以看一下：jetlink.bd.to/d/9d72fb4f23 这是我的测试站点，所以到目前为止，它还不完整，也没有处于生产模式。谢谢。
好的。试试这个： .navbar-fixed-top { border-bottom: 2px solid rgb(11, 166, 240); } .navbar-default .navbar-nav > .active > a { 边框顶部：3px 纯白色； } .navbar-default .navbar-nav > .active > li { 背景：#fff; }

标签： html css twitter-bootstrap responsive-design navbar

【解决方案1】：

当然可以。请参阅Bootsnipp here 上的 7 个自定义导航栏示例。

点击对应的查看按钮可以查看demo以及各个导航栏自定义的源码。

至于导航栏的颜色，请查看TWBSColor：它可以让您在线快速轻松地为引导程序创建自定义颜色导航栏。

【讨论】：

感谢您的回答，但我似乎找不到像 Coin URL 网站那样顶部有多余行的任何人。谢谢。
感谢您帮助我。这些示例将非常有用，该工具也将如此。谢谢！ :)

【解决方案2】：

Dude 只需添加一个边框顶部：3px solid #000;到你的链接？

就像在 Bootstrap 中一样，我认为它会是这样的

.navbar-nav li:active{

border-top: 3px solid #000; }

（如果颜色不起作用，请在颜色后使用 !important）

祝你有美好的一天！

【讨论】：

这就是答案。但不完全是，但感谢您的尝试。