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

Posted 2023-03-06

【中文标题】如何让我的菜单项在引导下拉菜单中居中

【英文标题】：how to get my menu items to center in bootstrap dropdown

【发布时间】：2015-08-09 22:50:59

【问题描述】：

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

【参考方案1】：

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

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

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

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

Align navigation to center

Center content in responsivebootstrap navbar

@Media min-width & max-width

希望这会有所帮助。

【讨论】：

很接近。正是你所做的，除了我希望它们不浮动、垂直堆叠并保持居中。换句话说，一个居中的列表。

@user2684452 哦，也许试试 display: block;而不是 display: inline-block;