如何使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浏览器而言).也许你必须更多地修改它.