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