Question

我是新手，我在定位流畅的下拉菜单时遇到了一些麻烦。我想把它放在中心或我的页面，并尝试了一些东西，但它不太正确。

我尝试添加一个span6类，然后将float: none; margin: 0 auto;添加到css中，这确实使它居中，但当响应式菜单启动它时，它位于中间而不是左侧之间。这也与菜单项混淆。

我还尝试在各个地方放置text-align:center;以查看是否可以执行任何操作，但它似乎没有任何效果。

任何帮助都会很精彩！

这是我的HTML

<div class="container-fluid">
  <div class="row-fluid">
    <div class="span12" >
      <div class="navbar ">
        <div class="container-fluid">
          <a data-target=".unique1" data-toggle="collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a>
          <div class="nav-collapse collapse navbar-responsive-collapse unique1">
            <ul class="nav">
              <li><?=anchor('/frontpage', 'Who we are');?></li>
              <li class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#">Do you need Diligence?<strong class="caret"></strong></a>
                <ul class="dropdown-menu">
                  <li>  <a href="#">Action</a>
                  </li>
                  <li>  <a href="#">Another action</a>
                  </li>
                  <li>  <a href="#">Something else here</a>
                  </li>
                  <li class="divider"></li>
                  <li class="nav-header">Nav header</li>
                  <li>  <a href="#">Separated link</a>
                  </li>
                  <li>  <a href="#">One more separated link</a>
                  </li>
                </ul>
              </li>
              <li class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong class="caret"></strong></a>
                <ul class="dropdown-menu">
                  <li>  <a href="#">Action</a>
                  </li>
                  <li>  <a href="#">Another action</a>
                  </li>
                  <li>  <a href="#">Something else here</a>
                  </li>
                  <li class="divider"></li>
                  <li class="nav-header">Nav header</li>
                  <li>  <a href="#">Separated link</a>
                  </li>
                  <li>  <a href="#">One more separated link</a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

设置margin-left：auto; margin-right：在带有类nav的ul上自动

Answer 2

在Bootstrap.css行：3102编辑

.nav > li > a {
 /* display: block; */
}

编辑bootstrap.css文件行：3638到3651，如下所示：

.navbar .nav {
  position: relative;
  left: 0;
  display: block;
/*  float: left;
*/  margin: 0 10px 0 0;
}
.navbar .nav.pull-right {
  float: right;
  margin-right: 0;
}
.navbar .nav > li {
/*  float: left; */ 
}

对于以下HTML工作原理。它显示菜单中心对齐。

<html>
<head>

  <link rel="stylesheet" href="public/css/LNedit.css"><link rel="stylesheet" href="public/css/bootstrap2.css">
  <style>
    .navbar-inner {
      text-align: center !important;
    }

    </style>


</head>

<body>

<div class="container-fluid">
    <div class="row-fluid">
    <div class="span12 navbar-inner" >
      <div class="navbar ">
        <div class="container-fluid">
          <a data-target=".unique1" data-toggle="collapse" class="btn btn-navbar"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></a>
          <div class="nav-collapse collapse navbar-responsive-collapse unique1">
            <ul class="nav">
              <li><?=anchor('/frontpage', 'Who we are');?></li>
              <li class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#">Do you need Diligence?<strong class="caret"></strong></a>
                <ul class="dropdown-menu">
                  <li>  <a href="#">Action</a>
                  </li>
                  <li>  <a href="#">Another action</a>
                  </li>
                  <li>  <a href="#">Something else here</a>
                  </li>
                  <li class="divider"></li>
                  <li class="nav-header">Nav header</li>
                  <li>  <a href="#">Separated link</a>
                  </li>
                  <li>  <a href="#">One more separated link</a>
                  </li>
                </ul>
              </li>
              <li class="dropdown">
                <a data-toggle="dropdown" class="dropdown-toggle" href="#">Dropdown<strong class="caret"></strong></a>
                <ul class="dropdown-menu">
                  <li>  <a href="#">Action</a>
                  </li>
                  <li>  <a href="#">Another action</a>
                  </li>
                  <li>  <a href="#">Something else here</a>
                  </li>
                  <li class="divider"></li>
                  <li class="nav-header">Nav header</li>
                  <li>  <a href="#">Separated link</a>
                  </li>
                  <li>  <a href="#">One more separated link</a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script><script type="text/javascript" src="js/bootstrap.min.js"> </script><script type="text/javascript" src="js/markdown.js"> </script><!--script(type='text/javascript', src='js/main.js') --><!--script(type='text/javascript', src='https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js')--><!--script(type='text/javascript', src='js/ui-bootstrap-tpls-0.4.0.min.js')--><script type="text/javascript" src="js/bootstrap-markdown.js"></script>
</body>
</html>

Bootstrap居中导航栏

2 个答案: