twitter-bootstrap 如何使 Twitter Bootstrap Navbar 透明？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29900764/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make Twitter Bootstrap Navbar transparent?
提问by kdr
I am trying to make my bootstrap navbartransparent. I am using bootstrap navbar-inverseand trying to add opacity by rgba(). I want my navbar to be transparent as shown in the image below:
我试图让我的引导程序navbar透明。我正在使用引导程序navbar-inverse并尝试通过rgba(). 我希望我的导航栏是透明的，如下图所示：
@font-face {
font-family: FuturaBook;
src: url('fonts/FuturaStd-Light_1.otf');
}
body{
font-family: 'FuturaBook', Arial, sans-serif;
}
/***************************************************************************
Navigation Bar
****************************************************************************/
.navbar-inverse{
background-color: rgba(34, 34, 34, 0.5);
border-bottom: none;
}
.navbar-header{
width:100%;
height: 90px;
}
.navbar-header #brand{
font-family: 'FuturaBook', Arial, sans-serif;
color: white;
font-size: 20pt;
margin-top: 20px;
text-transform: uppercase;
}
.mynav li
{
list-style: none;
display: inline-block;
border-left: 1px solid white;
padding-top: 36px;
padding-left: 10px;
padding-right: 10px;
/* margin-top: 16px; */
height: 90px;
}
.mynav li:last-child{
border-right: 1px solid white;
}
.mynav li a{
color:white;
}
.mynav li a:hover{
text-decoration: none;
}
/* .mynav li a:active{
background-color: black;
}*/<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
<nav class="navbar navbar-transparent navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-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" href="#" id="brand">Fashion Garage</a>
<div class="mynav pull-right">
<ul>
<li><a href="">TRENDS</a></li>
<li><a href="">PRODUCTS</a></li>
<li><a href="">DESIGNERS</a></li>
<li><a href="">MEMBERS</a></li>
<li><a href="">SEARCH</a></li>
<li><a href="">MY ACCOUNT</a></li>
</ul>
</div><!-- /mynav -->
</div><!-- /navbar-header -->
</div><!-- /container -->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="img/lady-1.jpg" alt="Lady-1">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="img/lady-2.jpg" alt="Lady-2">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</nav><!-- /nav -->
</div><!-- /wrapper -->
回答by CENT1PEDE
If you're still having problems I suggest just start over and use this :
It's pretty simple and straight forward. Don't add another class to navbarjust a suggestion. Also you can replace the linkof the Bootstrap CSS and JS. It's just the CDN link. Here's the output if your're interested.
如果您仍然遇到问题，我建议您重新开始并使用它：它非常简单直接。不要将另一个类添加到navbar一个建议中。您也可以替换Bootstrap CSS 和 JS的链接。这只是CDN链接。如果您有兴趣，这里是输出。
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<style type="text/css">
body{
background-image: url('http://seamlesspatternchecker.com/hash/seamless-pattern-samples/a/3/5/a35-vector-vector-seamless-simple-pattern-curtain-design-modern-stylish-texture-repeating-abstract-158117696.jpg');
}
.navbar{
border: none;
border-radius: 0;
background-color: rgba(0,0,0,0.5);
}
</style>
<body>
<nav class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-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" href="#">Brand</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</body>
回答by BM_tron
In the portion of your website, load your new custom CSS file after the default bootstrap stylesheet.
在您网站的部分中，在默认引导程序样式表之后加载您的新自定义 CSS 文件。
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/custom.css">
</head>
In your custom.css
在您的 custom.css 中
.navbar {
background-color: transparent;
background: transparent;
border-width: 0px;
}
回答by Sai Hanuman
Here is my code pen which i have tried making the navigation bar transparent and responsive. Hope it helps you.
这是我的代码笔，我尝试使导航栏透明且响应迅速。希望对你有帮助。
<div class="navbar navbar-inverse navbar-fixed-top opaque-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navMain">
<span class="glyphicon glyphicon-chevron-right" style="color:white;"></span>
</button>
回答by ptCoder
Try this:
试试这个：
.navbar {
background-color: transparent;
background: transparent;
}
.navbar li { color: #000 }
Update:On CSSseconde line replace: <nav class="navbar navbar-transparent navbar-inverse">to <nav class="navbar navbar-transparent">
更新：在CSS第二行替换：<nav class="navbar navbar-transparent navbar-inverse">到<nav class="navbar navbar-transparent">
Possible answers:
可能的答案：
Transparent color of Bootstrap-3 Navbar
