5

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

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

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

提前致谢

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

4

4 回答 4

12

咳咳，这很容易用纯 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 浏览器）。也许您必须对其进行更多修改。​</p>

于 2012-10-25T12:45:05.077 回答
3 
/*  clear bootstrap header colors */
.navbar-default {
    background-color: white;
    border-color: white;
}
于 2014-02-09T09:19:41.113 回答
2

也许我不明白一些东西，但刚刚处理了这个，似乎最简单的事情就是在 alpha 通道中用完全透明的颜色覆盖默认的导航栏颜色......

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

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

如果您的背景恰好是白色，将其设置为白色也可以，但这样您的背景是什么并不重要。

于 2014-12-19T05:25:05.277 回答
0

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

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

为了覆盖该!important属性末尾的标签，您需要!important在本地 css 文件中包含您自己的标签。不要对现有类进行此更改，.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;
}
于 2020-12-07T23:14:46.367 回答