【发布时间】：2017-02-15 23:05:15
【问题描述】：
[![在此处输入图像描述][1]][1]我已经下载了预定义的导航样式，我想在引导程序中使用它。所以基本上我想混合它们，以便引导程序可以使用相同的类，以达到 css 并实现所需的设计。我应该覆盖默认的引导导航栏，还是有一种简单的方法？
这是预定义的 html。
<nav class="menu menu--iris">
<ul class="menu__list">
<li><a href="#" id="fbox">FoundryBox</a></li>
<li class="menu__item menu__item--current"><a href="asdsa" class="menu__link">SELFIES</a></li>
<li class="menu__item"><a href="dasd" class="menu__link">PARTNERS</a></li>
<li class="menu__item"><a href="asdasd" class="menu__link">DATALOGISTIC</a></li>
</ul>
</nav>
基础引导：
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<a class="navbar-brand" href="#">Brand</a>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#about">SELFIES</a></li>
<li><a href="#contact">PARTNERS</a></li>
<li><a href="#">DIALOGISTIC</a></li>
</ul>
</div>
</nav>
css：
.menu__list {
position: relative;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
background-image: url('img/fejlec.png');
background-attachment: fixed;
background-repeat: no-repeat;
background-size: auto 100%;
text-align: right;
}
.menu--iris .menu__item .menu__link:nth-child(2){
float: right;
}
.menu--iris .menu__item .menu__link:nth-child(2){
float: right;
}
.menu--iris .menu__item .menu__link:nth-child(2){
float: right;
}
.menu__item {
display: block;
margin: 1em 0;
}
.menu__link {
font-size: 1.05em;
font-weight: bold;
display: block;
padding: 1em;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
display: table-cell;
}
.menu__link:hover,
.menu__link:focus {
outline: none;
}
/* Iris */
.menu--iris .menu__item {
margin: 0 1em;
}
.menu--iris .menu__link {
position: relative;
text-align: center;
color: #D1D1D1;
-webkit-transition: color 0.3s;
transition: color 0.3s;
}
.menu--iris .menu__link:hover,
.menu--iris .menu__link:focus {
color: #ffb4b4;
}
.menu--iris .menu__item--current .menu__link {
color: #E32228;
}
.menu--iris .menu__link::before,
.menu--iris .menu__link::after {
content: '';
position: absolute;
width: 10px;
height: 10px;
opacity: 0;
border: 2px solid #d94f5c;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
-webkit-transition-timing-function: cubic-bezier(0.17, 0.67, 0.05, 1.29);
transition-timing-function: cubic-bezier(0.17, 0.67, 0.05, 1.29);
}
.menu--iris .menu__link::before {
top: 0;
left: 0;
border-width: 2px 0 0 2px;
-webkit-transform: translate3d(10px, 10px, 0);
transform: translate3d(10px, 10px, 0);
}
.menu--iris .menu__link::after {
right: 0;
bottom: 0;
border-width: 0 2px 2px 0;
-webkit-transform: translate3d(-10px, -10px, 0);
transform: translate3d(-10px, -10px, 0);
}
.menu--iris .menu__item--current .menu__link::before,
.menu--iris .menu__item--current .menu__link::after {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
a {
text-decoration: none !important;
display:inline-block;
}
body{
background-image: url('img/selfii.jpg');
background-attachment: fixed;
background-repeat: no-repeat;
background-size:cover;
}
#fbox{
font-family: "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic",
font-weight: 100px;
color: #E32228;
text-decoration: none;
font-size: 30px;
text-shadow: 1px 1px #0f0f0f;
}
【问题讨论】：
标签： css twitter-bootstrap navbar