如何让我的菜单项在引导下拉菜单中居中

Question

我有一个简单的引导导航菜单。它工作得很好，但是当它折叠时，我希望能够取消浮动菜单项，并让它们在@media only screen and (min-width:768px) {} 及以下位置时在下拉菜单中居中对齐。

到目前为止，这些项目要么保持浮动，要么当我取消浮动它们并且文本居中对齐时，它们很难右对齐，但更糟糕的是，无论浏览器大小如何，折叠都保持打开状态。

HTML：

<header class="navbar navbar-inverse navbar-fixed-top bs-docs-nav" role="banner">
    <div class="container">
     <div class="navbar-header">
        <button class="navbar-toggle" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a href="/" class="navbar-brand white">Bab's Kitchen</a>
    </div>
    <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation">
      <ul class="nav navbar-nav">
        <?php html5blank_nav(); ?>
       </ul>
    </nav>
</header>

CSS：

.nav {
    float:right;
}
.nav ul li {
    text-decoration: none;
    list-style-type: none;
    margin-top:17px;
    margin-right:15px;
    font-size:14px;
    float: left;
    letter-spacing: 0.1em;
}
.nav ul li a:hover {
    text-decoration: none;
    color:purple;
    list-style-type: none;
}
.navbar-inverse .navbar-brand {
    font-family: 'cylburn';
    font-size:40px;
    color:#fff;
}
@media only screen and (min-width:480px) {
    .nav ul li {
        font-size:20px;
        text-align: center;
    }

}
@media only screen and (min-width:768px) {
    .nav ul li {
        font-size:12px;
        margin-right: 10px;
        margin-top:18px;
    }

Answer 1

如果我理解正确的话，你想要这样的东西：

@media (max-width: 768px) {
    .navbar .navbar-nav {
        display: inline-block;
        float: none;
        vertical-align: top;
    }

    .navbar .navbar-collapse {
        text-align: center;
    }
}

有一些 Stackoverflow 文章可以为您指明正确的方向并提供更多解释。

Align navigation to center

Center content in responsivebootstrap navbar

@Media min-width & max-width

希望这会有所帮助。