我有一个boottsrap菜单，由于某种原因略微向左对齐，我无法调试它。它没有任何行，但容器是流动的，将其更改为固定使其在移动设备中无响应
这是实例。 https://codepen.io/anon/pen/qjKbQM
这是HTML代码
<nav class="navbar navbar-default" style="border:1px solid red";>
<div class="container-fluid">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<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="#">UP</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#"><span class="glyphicon glyphicon-th" aria-hidden="true"></span> DEVIS GRATUIT</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Nos Ressource <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="/fiches-conseils" target="" data-drupal-link-system-path="node/578">Toutes nos ressources</a>
</li>
<li>
<a href="/fiches-conseils" target="" data-drupal-link-system-path="node/578">Fiches conseils</a>
</li>
<li>
<a href="/nos-fiches-metiers" target="" data-drupal-link-system-path="node/1099">Fiches métiers</a>
</li>
<li>
<a href="/foire-aux-questions" title="FAQ" target="" data-drupal-link-system-path="node/1079">Foire aux questions</a>
</li>
<li>
<a href="/revue-de-presse" target="" data-drupal-link-system-path="node/480">Revue de presse</a>
</li>
<li>
<a href="https://blog.cacomptepourmoi.fr/" target="_blank">Le Blog</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Nos Fonctionalites <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="/nos-fonctionnalites" target="" data-drupal-link-system-path="node/474">Toutes nos fonctionnalités</a>
</li>
<li class="">
<a href="/nos-fonctionnalites#indicateurs" target="" data-drupal-link-system-path="node/474">Mes indicateurs</a>
</li>
<li class="">
<a href="/nos-fonctionnalites#macompta" target="" data-drupal-link-system-path="node/474">Ma comptabilité </a>
</li>
<li class="">
<a href="/nos-fonctionnalites#devisfactures" target="" data-drupal-link-system-path="node/474">Mes devis et factures</a>
</li>
<li class="">
<a href="/nos-fonctionnalites#monbudget" target="" data-drupal-link-system-path="node/474">Mon budget</a>
</li>
<li>
<a href="/nos-fonctionnalites#socialrh" target="" data-drupal-link-system-path="node/474">Mon social-RH</a>
</li>
<li class="">
<a href="/nos-fonctionnalites#coffrefort" target="" data-drupal-link-system-path="node/474">Mon coffre-fort</a>
</li>
</ul>
</li>
<li><a href="#">Accounts</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Notre Cabinet <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="/qui-sommes-nous" target="" data-drupal-link-system-path="node/1088">Tout sur notre cabinet</a>
</li>
<li class="">
<a href="/qui-sommes-nous" target="" data-drupal-link-system-path="node/1088">Qui sommes-nous ?</a>
</li>
<li>
<a href="/pourquoi-nous-choisir" title="Choisir Ça Compte pour Moi" target="" data-drupal-link-system-path="node/669">Pourquoi nous choisir ?</a>
</li>
<li>
<a href="/ca-compte-pour-moi-en-5-etapes" title="Les étapes pour devenir client" target="" data-drupal-link-system-path="node/1089">Comment devenir client ?</a>
</li>
<li>
<a href="/notre-equipe" title="Découvrez notre équipe" target="" data-drupal-link-system-path="node/630">Notre équipe</a>
</li>
<li>
<a href="/vos-questions-nos-reponses" target="" data-drupal-link-system-path="node/1087">Vos questions, nos réponses</a>
</li>
<li class="">
<a href="/temoignages-clients" title="Témoignages de nos clients" target="" data-drupal-link-system-path="node/969">Témoignages clients</a>
</li>
<li class="">
<a href="/recrutement" target="" data-drupal-link-system-path="node/446">Recrutement</a>
</li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Nos Solutions <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>
<a href="/nos-solutions" target="" data-drupal-link-system-path="node/374">Toutes nos solutions</a>
</li>
<li class="">
<a href="/nos-solutions/tpe" target="" data-drupal-link-system-path="node/392">TPE / Consultants</a>
</li>
<li>
<a href="/nos-solutions/createur" target="" data-drupal-link-system-path="node/388">Porteurs de projet</a>
</li>
<li>
<a href="/nos-solutions/sci-location-meublee" target="" data-drupal-link-system-path="node/497">SCI / Locations meublées</a>
</li>
<li class="">
<a href="/nos-solutions/paye-salaire" target="" data-drupal-link-system-path="node/394">Paye des salariés</a>
</li>
<li class="">
<a href="/nos-solutions/profession-liberale" target="" data-drupal-link-system-path="node/757">Professions Libérales</a>
</li>
<li class="">
<a href="/nos-solutions/association" target="" data-drupal-link-system-path="node/761">Associations</a>
</li>
<li class="">
<a href="/nos-solutions" title="Les solutions de comptabilité en ligne" target="" data-drupal-link-system-path="node/374">Toutes nos solutions</a>
</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</div><!-- /.container-fluid -->
</nav>
这就是css：
.navbar-default {
font-size: 1.15em;
font-weight: 400;
border: 0px;
border-radius: 0px;
background: #021a2f !important;
}
.navbar-default .navbar-nav>li>a {
color: white;
}
.navbar-default .navbar-nav>li>a:hover {
color: #cbf0ff;
}
.navbar-default .navbar-brand {
color: #002433;
}
.navbar-default .navbar-brand:hover {
color: #ffffff;
text-shadow: 1px -1px 8px #b3e9ff;
}
.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
background-color: #004059;
color: white;
}
.navbar-default .navbar-toggle {
border: none;
}
.navbar-default .navbar-collapse, .navbar-default .navbar-form {
border: none;
}
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus {
background-color: #002433;
}
.navbar-default .navbar-toggle .icon-bar {
}
.dropdown-menu {
background-color: #004059;
color: white;
border: 0px;
border-radius: 2px;
padding-top: 10px;
padding-bottom: 10px;
}
.dropdown-menu>li>a {
background-color: #004059;
color: white;
}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
background-color: #004059;
color:white;
}
.dropdown-menu .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #003246;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a {
color: #ffffff;
}
@media (max-width: 767px) {
.dropdown-menu>li>a {
background-color: #006b96;
color: #ffffff;
}
.dropdown-menu>li>a:hover {
color: #ffffff;
}
.navbar-default .navbar-nav .open .dropdown-menu>li>a:focus, .navbar-default .navbar-nav .open .dropdown-menu>li>a:hover {
color: #ffffff;
background-color: transparent;
}
.dropdown-menu .divider {
height: 1px;
margin: 9px 0;
overflow: hidden;
background-color: #005577;
}
}
如何在不失去导航栏响应性的情况下使菜单居中
答案 0 :(得分：2)
添加以下css获取
.nav.customCl {
display: flex;
justify-content: center;
align-items: center;
flex-flow: row wrap;
}
在以下html中使用此类
<ul class="nav navbar-nav customCl"
<强> codepen link