Question

我有一个简单的bootstrap导航菜单。它工作得很好，但是当它崩溃时，我希望能够取消浮动菜单项，并使它们在@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

希望这有帮助。

如何让我的菜单项在bootstrap下拉列表中居中

1 个答案: