1
我在引導程序中使用yamm，但我需要使它flex，因此每個列表將有相同的空間到另一個，如果我想在未來添加另一個li它不會混淆它們之間的空間，但每次我使用display：flex。它不會影響任何東西。你們可以幫忙嗎？yamm導航引導程序與flex
繼承人我的代碼
.yamm .nav,
.yamm .collapse,
.yamm .dropup,
.yamm .dropdown {
position: static;
}
.yamm .dropdown-menu {
left: auto;
top: 110% ;
-moz-box-shadow: none;
-webkit-box-shadow: none;
border: 1px solid #f1f1f1;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
.yamm .dropdown-menu .yamm-content {
padding: 20px 15px;
}
.yamm .dropdown-menu .yamm-content .links li a {
padding: 8px 0px;
}
.yamm .dropdown-menu h2 {
font-size: 15px;
line-height: 27px;
color: #555;
text-transform: uppercase;
font-family: 'FjallaOneRegular';
margin-top: 0px;
}
.yamm .dropdown-menu li {
line-height: 26px;
padding: 2px 0px;
-webkit-transition: all 0.3s ease 0s;
-moz-transition: all 0.3s ease 0s;
-o-transition: all 0.3s ease 0s;
transition: all 0.3s ease 0s;
}
.yamm .dropdown-menu li a {
color: #3D3D3D;
line-height: 26px ;
text-transform: none ;
display: block;
padding: 8px 16px;
}
.yamm .dropdown-menu li a:hover,
.yamm .dropdown-menu li a:focus {
background: rgba(0, 0, 0, 0);
margin-left: 5px;
}
.yamm .dropdown-menu .text {
font-size: 13px;
line-height: 20px;
position: relative;
bottom: 0px;
top: 73px;
}
.yamm .dropdown.yamm-fw .dropdown-menu {
left: 0;
right: 0;
}
.header-nav .yamm .dropdown-menu {
background: #fff;
}
.yamm .dropdown-menu.pages {
padding: 10px 37px;
}
.yamm .dropdown-menu .title:hover,
.yamm .dropdown-menu .title:focus {
color: #12cca7;
}
.yamm .dropdown-menu li a:hover,
.yamm .dropdown-menu li a:focus {
color: #12cca7;
}
.yamm .dropdown-menu {
border-top-color: #12cca7;
}<div class="header-nav animate-dropdown" style="background-color:#3498db">
<div class="container">
<div class="yamm navbar navbar-default" role="navigation">
<div class="navbar-header">
<button data-target="#mc-horizontal-menu-collapse" data-toggle="collapse" class="navbar-toggle collapsed" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="nav-bg-class">
<div class="navbar-collapse collapse" id="mc-horizontal-menu-collapse">
\t <div class="nav-outer">
\t \t <ul class="nav navbar-nav">
\t \t \t <li class="active dropdown yamm-fw">
\t \t \t \t <a href="home.html" data-hover="dropdown" class="dropdown-toggle" data-toggle="dropdown" onMouseOver="this.style.color='#0F0'"
onMouseOut="this.style.color='#fff'">Home</a><!-- LOOPING -->
\t \t \t \t <ul class="dropdown-menu">
\t \t \t \t \t <li>
\t \t \t \t \t \t <div class="yamm-content">
<div class="row">
<div class="col-md-8 col-sm-8">
<div class="row">
<div class='col-md-12'>
<div class="col-xs-12 col-sm-6 col-md-3">
<h2 class="title">Computer</h2>
<ul class="links">
<li><a href="#" >Lenovo</a></li><!-- LOOPING -->
<li><a href="#" >Microsoft </a></li>
<li><a href="#" >Fuhlen</a></li>
<li><a href="#" >Longsleeves</a></li>
</ul>
</div><!-- /.col -->
<div class="col-xs-12 col-sm-6 col-md-3">
<h2 class="title">Camera</h2>
<ul class="links">
<li><a href="#" >Fuhlen</a></li><!-- LOOPING -->
<li><a href="#" >Lenovo</a></li>
<li><a href="#" >Microsoft </a></li>
<li><a href="#" >Longsleeves</a></li>
</ul>
</div><!-- /.col -->
<div class="col-xs-12 col-sm-6 col-md-3">
<h2 class="title">Apple Store</h2>
<ul class="links">
<li><a href="#" >Longsleeves</a></li>
<li><a href="#" >Fuhlen</a></li>
<li><a href="#" >Lenovo</a></li>
<li><a href="#" >Microsoft </a></li>
</ul>
</div><!-- /.col -->
<div class="col-xs-12 col-sm-6 col-md-3">
<h2 class="title">Smart Phone</h2>
<ul class="links">
<li><a href="#"
>Microsoft </a></li> <!-- LOOPING -->
<li><a href="#">Longsleeves</a></li>
<li><a href="#">"Fuhlen</a></li>
<li><a href="#">Lenovo</a></li>
</ul>
</div><!-- /.col -->
</div>
</div>
</div>
<div class="col-sm-4">
</div>
</div><!-- /.row -->
<!-- ============================================== WIDE PRODUCTS ============================================== -->
<!-- ============================================== WIDE PRODUCTS : END ============================================== -->
</div><!-- /.yamm-content --> \t \t \t \t \t </li>
\t \t \t \t </ul>
\t \t \t </li>
\t \t \t <li class="dropdown">
\t \t \t \t
\t \t \t \t <a href="category.html" onMouseOver="this.style.color='#0F0'"
onMouseOut="this.style.color='#fff'" >Electronics <!-- LOOPING -->
\t \t \t \t <span class="menu-label hot-menu hidden-xs">hot</span>
\t \t \t \t </a>
\t \t \t </li>
\t \t \t <li class="dropdown hidden-sm">
\t \t \t \t
\t \t \t \t <a href="category.html" >Television
\t \t \t \t <span class="menu-label new-menu hidden-xs">new</span>
\t \t \t \t </a>
\t \t \t </li>
\t \t \t <li class="dropdown hidden-sm">
\t \t \t \t <a href="category.html" >Smart Phone</a>
\t \t \t </li>
\t \t \t <li class="dropdown">
\t \t \t \t <a href="contact.html" >Contact</a>
\t \t \t </li>
\t \t \t
\t \t \t
\t \t \t
\t \t </ul><!-- /.navbar-nav -->
\t \t <div class="clearfix"></div> \t \t \t \t
\t </div><!-- /.nav-outer -->
</div><!-- /.navbar-collapse -->
</div><!-- /.nav-bg-class -->
</div><!-- /.navbar-default -->
</div><!-- /.container-class -->
</div><!-- /.header-nav -->