出于某种原因,我无法更改导航栏。我试着让它变得透明。我知道bootstrap navbar通常是一张图片,所以我加入了background-image: none
。
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
</button>
<a class="navbar-brand page-scroll" href="#intro">Eric West</a>
</div>
<div class="collapse navbar-collapse navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li>
<a class="page-scroll" href="#about">About</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a class="page-scroll" href="#projects">Projects</a>
</li>
<li>
<a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
CSS:
navbar {
background-color: transparent;
background: transparent;
background-image: none;
}
答案 0 :(得分:3)
不要删除.navbar-inverse(或.navbar-default),除非您计划添加一些自定义CSS来弥补它,因为这些会向导航添加属性,尤其是navbar-toggle
类。
如果没有其中任何一个,您将从导航中删除很多CSS,并且{7}在768px以下的设备上将无法显示navbar-toggle
,它将会存在且可操作但您不会成为能够看到它。
我会添加一个自定义导航类,并使用它来覆盖您需要更改的属性。
参见示例,其中包括一个有一个,另一个没有附加属性。
body,
html {
background: grey;
margin-top: 50px;
}
.navbar.navbar-custom {
background-color: transparent;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-inverse navbar-custom navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-1"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand page-scroll" href="#intro">Custom Navbar</a>
</div>
<div class="collapse navbar-collapse navbar-1">
<ul class="nav navbar-nav">
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li> <a class="page-scroll" href="#about">About</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> <a class="page-scroll" href="#projects">Projects</a>
</li>
<li> <a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<nav class="navbar">
<div class="container-fluid">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-2"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a class="navbar-brand page-scroll" href="#intro">Navbar Only</a>
</div>
<div class="collapse navbar-collapse navbar-2">
<ul class="nav navbar-nav">
<li class="hidden">
<a class="page-scroll" href="#page-top"></a>
</li>
<li> <a class="page-scroll" href="#about">About</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li> <a class="page-scroll" href="#projects">Projects</a>
</li>
<li> <a class="page-scroll" href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
&#13;
答案 1 :(得分:0)
不确定这是否是一个错字,但您需要添加.
来定位css中的navbar类,如下所示:
.navbar {
background-color: transparent;
background: transparent;
background-image: none;
}
正如@ Benya16所提到的,navbar-inverse
类修改了导航栏的基本属性,您可以在文档here中阅读相关内容。如果删除该引导程序属性,则它将是引导程序默认值。
答案 2 :(得分:0)
Bootstraps Navbar由其CSS文件定义。要更改颜色,只需执行.navbar-default:background-color: transparent !important
虽然!important不是最佳做法,但您始终可以更改Bootstrap.css文件中的颜色。
Bootstrap.css - 第4594行,找到.navbar-inverse背景色。
执行ctrl-f并输入navbar-defualt来找到那个。