如何使 twitter-bootstrap 导航栏没有颜色

Question

我正在尝试在我的应用程序中重现像 basecamp 导航栏这样的效果。

交易是导航栏将具有与正文背景颜色相同的颜色，并且没有边框或任何东西，这让人感觉“都是一样的东西”......

有人知道这样做的好方法吗？ PS：我正在使用.less文件，因此，我可以轻松编辑变量。

提前致谢

---

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

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 浏览器而言）。 也许你需要再修改一下。

Answer 2

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

Answer 3

也许我不明白什么，但刚刚处理过这个问题，似乎最简单的方法是在 alpha 通道中用完全透明的颜色覆盖默认导航栏颜色......

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

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

如果您的背景恰好是白色，则将其设置为白色也可以，但这样您的背景就无关紧要了。

Answer 4

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

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

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

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

CSS

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