2

我有一个超级简单的网站，这里使用了一个粘性导航栏。列表项位于左侧的几个位置，我不知道为什么。我已经修改了我能想到的所有边距和填充，但它不会让步。我还应该指出我正在使用 Bootstrap。

这是我的 HTML：

<div id="nav-wrapper">
<div id="nav" class="navbar navbar-inverse affix-top" data-spy="affix">
  <div class="navbar-inner" 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-arrow">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 {
    float:none;
    display:inline-block;
    *display:inline; /* ie7 fix */
    *zoom:1; /* hasLayout ie7 trigger */
    vertical-align: top;
    padding:0 2em;
    margin:0;
}
.navbar-inner {
    text-align:center;
    margin-bottom:0;
}
.navbar-inner ul.nav li {
    text-align: center;
}
    .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;
}
.navbar .nav > .active a:hover, .navbar .nav > li a:hover, .navbar .nav > .active a {
    color:white; 
    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;
}
#nav.affix, #nav.affix-bottom {
    position: fixed;
    top: 0;
    width: 100%
}
#nav {
    position:relative;
    z-index:999;
    -webkit-perspective: 1000; -webkit-backface-visibility: hidden;
}

我知道这是一个小细节，但我已经尝试修复它好几天了，无法弄清楚为什么它会很痛苦。

谢谢你的帮助，

布赖恩

4

2 回答 2

2

您在 (bootstrap.min.css:9) 上有 10px 的右边距，.navbar .nav这会将其向左推一点。

改变这个：

.navbar .nav {
  display:block;
  float:left;
  left:0;
  margin:0 10px 0 0;
  position:relative;
}

对此：

.navbar .nav {
  display:block;
  float:left;
  left:0;
  margin:0;
  position:relative;
}
于 2013-02-13T19:36:50.120 回答
0

好消息是如何使列表项居中：

添加一个名为“.center”的类，如下所示：

 <div class="navbar navbar-fixed-top center">
      <div class="navbar-inner">
         ....
      </div>
 </div>

然后使用这个 CSS：

.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;
}

要重新对齐下拉菜单，请使用以下命令：

.center .dropdown-menu {
    text-align: left;
}

这取自之前的答案。

现在，坏消息是，该解决方案还将菜单项集中在平板电脑和移动视口的移动菜单下拉列表中。我十分钟前刚刚在这里发布了一个问题：

如何为 Twitter Bootstrap 覆盖/撤消 CSS 类属性

如果您找到解决方案，请告诉我，因为我们都在问同一个问题！

于 2013-02-13T19:38:02.817 回答