我在引导程序中使用yamm，但是我需要将其设置为flex，因此每个列表将与另一个列表具有相同的空格，如果我想在将来添加另一个li，它将不会弄乱它们之间的空间，但每次我使用显示：弯曲。它不会影响任何事情。那么你们可以帮忙吗？
继承我的代码
.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">
<div class="nav-outer">
<ul class="nav navbar-nav">
<li class="active dropdown yamm-fw">
<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 -->
<ul class="dropdown-menu">
<li>
<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 --> </li>
</ul>
</li>
<li class="dropdown">
<a href="category.html" onMouseOver="this.style.color='#0F0'"
onMouseOut="this.style.color='#fff'" >Electronics <!-- LOOPING -->
<span class="menu-label hot-menu hidden-xs">hot</span>
</a>
</li>
<li class="dropdown hidden-sm">
<a href="category.html" >Television
<span class="menu-label new-menu hidden-xs">new</span>
</a>
</li>
<li class="dropdown hidden-sm">
<a href="category.html" >Smart Phone</a>
</li>
<li class="dropdown">
<a href="contact.html" >Contact</a>
</li>
</ul><!-- /.navbar-nav -->
<div class="clearfix"></div>
</div><!-- /.nav-outer -->
</div><!-- /.navbar-collapse -->
</div><!-- /.nav-bg-class -->
</div><!-- /.navbar-default -->
</div><!-- /.container-class -->
</div><!-- /.header-nav -->
答案 0 :(得分：0)
要使用flex，您应该将display: flex添加到父元素。
你可以这样做（我故意将.col-xs-12 col-sm-6 col-md-3的CSS定义留空，以表明没有特别需要为flex子项定义CSS规则，直到你有特定的样式需要）：
.col-md-12{
display: flex;
justify-content: space-between;
}
.col-xs-12 col-sm-6 col-md-3{
}<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>
<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>
<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>
<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>
</div>