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类定义默认背景色。在开发工具中，您可以看到.bg-light的样式如下：

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

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

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

CSS

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

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

4 个答案: