如何使Twitter Bootstrap导航栏没有颜色？

Question

我正在尝试在我的应用程序中复制Basecamp导航栏的效果。

问题是，导航栏的颜色与页面背景颜色相同，没有边框或其他东西，这使得感觉“都是同一件事”....

有人知道一个好方法吗？ PS：我正在使用.less文件，所以我可以轻松编辑变量。

提前致谢

---

编辑：我忘了说，但我也想要bootstrap的固定顶部和响应式行为。 我已经在我的应用程序中使用tw bootstrap，所以我真的想使用它。

- caarlos0

Answer 1

啊, 这可以很容易地通过纯CSS实现，你甚至不需要Bootstrap，也不需要它的CSS类

HTML：

    <ul class="navigation">
      <li><a href="#">Home</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>

CSS：

​.navigation li {
    display: inline;
    padding-left: 5px;
    padding-right: 5px;
}

当然，您仍然需要为链接设置样式以删除文本装饰等。 编辑：

.navbar-inner {
  background: none !important; 
  border: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

.navbar-inverse .nav .active > a {
  background: 0 !important; 
  color: #333 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
}

.navbar-inverse .nav > li > a {
  color: #333 !important;
  text-shadow: none !important;
}

.navbar-inverse .nav > li > a:hover {
  color: #333 !important;
}

演示： http://codepen.io/anon/pen/vJsfz

我使用CSS编写了一些简单的“重置”样式，以删除所有颜色、边框和阴影（至少适用于Webkit浏览器）。也许您需要进行更多修改。

- sascha

---

但是我也想要Bootstrap的fixed-top和响应式行为。我已经在我的应用程序中使用了tw bootstrap。无论如何，感谢您的回答。 - caarlos0

那么，为什么你没有把这些信息添加到你的问题中呢？我会根据这些信息更新我的答案。 - sascha

正如 @t-my 所提到的，演示需要更新 Bootstrap 引用；Github 不再提供这样的资源，因此链接应该更新为 CDN 链接。 - Tieson T.

Answer 2

/*  clear bootstrap header colors */
.navbar-default {
    background-color: white;
    border-color: white;
}

- Simon

Answer 3

也许我理解有误，但是刚刚处理完这个问题后，似乎最简单的方法就是在alpha通道中使用完全透明的颜色来覆盖默认的导航栏颜色...

.navbar-default {
    background: rgba(255, 255, 255, 0);
}

如果使用rgba，前三个数字表示红、绿、蓝，范围为0-255，最后一个是alpha通道，0表示完全透明，1表示完全不透明。

如果你的背景恰好是白色，将其设置为白色也可以，但这样做无论你的背景是什么都没问题。

- davidrynn

Answer 4

Bootstrap（v5 beta，但也适用于一些早期版本）将使用！important标记来标记某些样式类。这将在应用css时覆盖标准特异性规则。如果您在Chrome中导航到页面并使用开发工具突出显示要更改的元素，则可以查看正在应用的样式。在navbar的情况下，Bootstrap使用.bg-light类定义默认背景颜色。在开发工具中，您可以看到.bg-light样式如下：

.bg-light {
    background-color: #f8f9fa!important;
}

为了覆盖该属性末尾的!important标签，您需要在本地CSS文件中包含自己的!important标签。不要对.bg-light的现有类进行更改，因为这可能会破坏代码中的其他Bootstrap元素。相反，我处理这个问题的方式是在我的HTML中为该元素分配一个id，然后使用!important标签设置自定义CSS属性来覆盖它。例如：
HTML

<nav class="navbar navbar-expand-lg navbar-light bg-light" id="navbar">

CSS

#navbar {
    background-color: transparent!important;
}

- Jon Deavers