Question

我正在尝试将菜单列表项目放在引导程序导航栏中。我尝试过很多CSS样式，但它仍然在左边。如果我对css的错误，我的html和css请纠正我。[更具体的是我想要的是我希望这些菜单项目正确徽标下方。] [1]

<div class="header-botom">
            <div class="content white">
                <nav class="navbar navbar-default nav-menu" role="navigation">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
                            <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="clearfix"></div>
                    <!--/.navbar-header-->

                    <div class="collapse navbar-collapse collapse-pdng" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav nav-font">
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Ear Rings</a></li>
                            <li><a href="#">Jewelry </a></li>
                            <li><a href="#">Accessories</a></li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
                    <!--/.navbar-collapse-->
                    <div class="clearfix"></div>
                </nav>
                <div class="clearfix"></div>
            </div

>
             </div> 

.nav-menu{
    background: transparent;
    border-radius: 0;
    border: 0;
    margin-top: 6px;
}
.navbar .{
    text-align:center;
}
.navbar-nav li{
    float: none;
    display: inline-block;
}



  [1]: https://i.stack.imgur.com/wxHSz.png

Answer 1

在自定义css中添加以下类：

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

演示：

.nav-menu {
  background: transparent;
  border-radius: 0;
  border: 0;
  margin-top: 6px;
}

.navbar . {
  text-align: center;
}

.navbar-nav li {
  float: none;
  display: inline-block;
}

.navbar-nav {
  text-align: center;
  background: #e4e4e4;
}

<div class="header-botom">
  <div class="content white">
    <nav class="navbar navbar-default nav-menu" role="navigation">

      <div class="collapse navbar-collapse collapse-pdng" id="bs-example-navbar-collapse-1">
        <ul class="nav navbar-nav nav-font">
          <li><a href="#">Home</a></li>
          <li><a href="#">Ear Rings</a></li>
          <li><a href="#">Jewelry </a></li>
          <li><a href="#">Accessories</a></li>
        </ul>
        <div class="clearfix"></div>
      </div>
      <div class="clearfix"></div>
    </nav>
    <div class="clearfix"></div>
  </div>
</div>

Answer 2

是的，如果你使用bootstrap

，我似乎得到了你的问题的解决方案

将该类添加到自定义css文件

中

.collapse-pdng { padding: 0px 0px; margin: 0 auto; width: 32%; }

在html文件中添加以下类

    <div class="text-center">
       <div class="collapse navbar-collapse collapse-pdng" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav nav-font">
                            <li><a href="#">Home</a></li>
                            <li><a href="#">Ear Rings</a></li>
                            <li><a href="#">Jewelry </a></li>
                            <li><a href="#">Accessories</a></li>
                        </ul>
                        <div class="clearfix"></div>
                    </div>
    </div>

在div中添加课程text-center并将整个菜单放在该课程中，我希望这会对您有所帮助，请让我知道

Answer 3

您要查找的是添加这些css属性。

.navbar .navbar-nav {
  display: inline-block;
  float: none;
  vertical-align: top;
}

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

此question可能重复。

JS Bin here

我的Bootstrap Navbar列表没有到达中心

3 个答案: