无论如何Bootstrap导航栏不会居中 [英] Bootstrap navbar will not center no matter what

问题描述

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

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

谢谢，

Brian

PS对不起所有链接： - /

这是我的 JSFiddle

这是我的HTML：

 < div id =nav-wrapper> 
< div id =navclass =navbar navbar-inverse affix-top centerdata-spy =affix> 
< div class =navbar-inner pull-centerdata-spy =affix-top> 
< div class =container> 
 
 <！ -  .btn-navbar用作折叠导航栏内容的切换 - > 
< a class =btn btn-navbardata-toggle =collapsedata-target =。nav-collapse> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< span class =icon-bar>< / span> 
< / a> 
 
 <！ - 您想隐藏在940像素或以下的所有内容，位于此处 - > 
< div class =nav-collapse collapse> 
< ul class =nav> 
< li>< a href =＃home>主页< / a>< / li> 
< li>< a href =＃service-top>服务< / a>< / li> 
< li>< a href =＃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修复* / 
 * zoom：1; / * hasLayout ie7触发器* / 
 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; 
填充：.5em 1em; 
保证金：.5em 1em; 
最小宽度：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; 
填充：.5em 1em; 
保证金：.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; 
保证金：0; 
 width：10em; 
} 
＃nav.affix，＃nav.affix-bottom {
 position：fixed; 
 top：0; 
宽度：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修复* / 
 * zoom：1; / * hasLayout ie7触发器* / 
 vertical-align：top; 
} 
 .center .navbar-inner {
 text-align：center; 
 
  

解决方案

.navbar .nav> .active a：hover，.navbar .nav> li a：hover，.navbar .nav> .active a 和 .navbar .nav> li a 都有 margin：0.5em 1em; 的规则。将其更改为保证金：0.5em 0; 。

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

添加此规则：

  .navbar .nav {
 float：none; 
} 
  

I have been having a dreadful time trying to center my navbar li in the center of my navbar using Bootstrap. I have tried using info from similar questions such as this one, this one, and this one. My navigation doesn't use pills or tabs, but I was hoping I could edit my code accordingly. My site uses a sticky nav, which is probably the most complicated thing on my page. I've create a JSFiddle using the same code I've uploaded, but for some reason the JSFiddle code properly aligns everything, whereas on my page, all the links are offset to the right 10 or so pixels. I've tried setting all my margins and padding to 0 as well, still no luck.

Can somebody please help me, this is annoying the crap out of me and I'm about to throw my computer off the roof! If you can solve my problem I'll bake you some cookies.

Thanks,

Brian

P.S. Sorry for all the links :-/

Here's my JSFiddle

Here's my 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-->

Here's my mess of a 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;
}

解决方案

.navbar .nav > .active a:hover, .navbar .nav > li a:hover, .navbar .nav > .active a and .navbar .nav > li a both have a rule of margin: 0.5em 1em;. Change it to margin: 0.5em 0;.

.navbar .nav, .navbar .nav > li has a rule of float: center;. Remove it.

Add this rule:

.navbar .nav {
    float: none;
}

这篇关于无论如何Bootstrap导航栏不会居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！