Question

我一直在尝试使用Bootstrap将导航栏中心放在导航栏的中心，这是一段可怕的时间。我尝试使用类似问题的信息，例如this one，this one和this one。我的导航不使用药片或标签，但我希望我可以相应地编辑我的代码。 My site使用粘性导航，这可能是我页面上最复杂的东西。我使用我上传的相同代码创建了一个JSFiddle，但由于某些原因，JSFiddle代码正确地对齐了所有内容，而在我的页面上，所有链接都偏移到右边10个左右的像素。我已经尝试将所有边距和填充设置为0，但仍然没有运气。

有人可以帮助我吗，这让我很烦恼，而且我要将电脑从屋顶上扔掉！如果你能解决我的问题，我会给你烤一些饼干。

谢谢，

布赖恩

P.S。抱歉所有链接： - /

这是我的JSFiddle

这是我的HTML：

<div id="nav-wrapper">
<div id="nav" class="navbar navbar-inverse affix-top center" data-spy="affix">
  <div class="navbar-inner pull-center" data-spy="affix-top">
    <div class="container">

      <!-- .btn-navbar is used as the toggle for collapsed navbar content -->
      <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>

      <!-- Everything you want hidden at 940px or less, place within here -->
      <div class="nav-collapse collapse">
        <ul class="nav">
            <li><a href="#home">Home</a></li>
            <li><a href="#service-top">Services</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul><!--/.nav-->
      </div><!--/.nav-collapse collapse pull-right-->
    </div><!--/.container-->
  </div><!--/.navbar-inner-->
</div><!--/#nav /.navbar navbar-inverse-->
</div><!--/#nav-wrapper-->

这是我的一堆CSS：

.navbar {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    padding:0;
    z-index:999;
    margin-bottom:0;
}
.navbar.navbar-inverse .navbar-inner {
    background: #390 url(../img/green-bg.png) repeat;
    border:none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
    margin-bottom:0;
}
.navbar .nav, .navbar .nav > li {
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
    padding:0 10px;
    margin:0 auto;
}
.navbar .nav > li a {
    color:white;
    background:rgba(0, 0, 0, 0.2);
    text-shadow:none;
    font-size:1.5em;
    font-family: marvel, serif;
    padding:.5em 1em;
    margin:.5em 1em;
    min-width:90px;
}
.navbar .nav > .active a:hover, .navbar .nav > li a:hover, .navbar .nav > .active a {
    color:#FFF;
    background: #390 url(../img/green-bg.png) repeat;
    text-shadow:none;
    font-size:1.5em;
    font-family: marvel, serif;
    padding:.5em 1em;
    margin:.5em 1em;
    -webkit-box-shadow: inset 0 0 10px #000;
    -moz-box-shadow: inset 0 0 10px #000;
    box-shadow: inset 0 0 10px #000;
}
.navbar .nav > li {
    padding:1em;
    margin:0;
    width:10em;
}
#nav.affix, #nav.affix-bottom {
    position: fixed;
    top: 0;
    width: 100%;
    -webkit-box-shadow: 0px 2px 4px #000;
    -moz-box-shadow: 0px 2px 4px #000;
    box-shadow: 0px 2px 4px #000;
}
#nav {
    position:relative;
    z-index:999;
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
}
.center.navbar .nav, .center.navbar .nav > li {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
}
.center .navbar-inner {
    text-align:center;
}

Answer 1

尝试更改

.navbar .nav, .navbar .nav > li {
    float:center;
    ...

到

.navbar .nav, .navbar .nav > li {
    text-align:center;
    ...

据我所知，没有漂浮中心这样的东西。只有左，右，无和继承。

Answer 2

.navbar .nav > .active a:hover, .navbar .nav > li a:hover, .navbar .nav > .active a和.navbar .nav > li a都有margin: 0.5em 1em;规则。将其更改为margin: 0.5em 0;。

.navbar .nav, .navbar .nav > li的规则为float: center;。删除它。

添加此规则：

.navbar .nav {
    float: none;
}

Answer 3

尝试在导航

后将此类添加到ul

.nav-center {
    float: none;
}

这将覆盖来自bootstrap.css的float：left。

无论如何，Bootstrap导航栏都不会居中

3 个答案: