0

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

我尝试添加一个 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>
4

2 回答 2

0

设置左边距：自动；margin-right:auto on ul with class nav

于 2013-08-04T19:59:51.153 回答
0

在 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>
于 2013-08-06T06:48:20.873 回答