Question

我有一个自定义导航栏，我使用Bootstrap制作了3个简单的链接：Home，Services和Contact。就像现在一样，每个链接周围的框都是不同的大小，因为每个链接包含不同数量的字符，如here所示。我一直在尝试编辑我的代码，所以所有列表项的宽度都是100px，但没有任何变化。我能做些什么才能使链接周围的所有框都宽度相同。

以下是导航的HTML：

<div id="nav-wrapper">
<div id="nav" class="navbar navbar-inverse affix-top center" 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;
}

Answer 1

这是我为你创建的一个jsfiddle - http://jsfiddle.net/shail/Y928B/8/

<ul class="nav nav-pills">
<li>
<a href="#">Home</a>
</li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact us</a></li>
</ul>

CSS代码

 .nav li {
float:left;
width:7em; /*Fixes the width of all elements*/
padding:10px;
}
.nav li a:link {
display: block;
width: 100%;
text-align:center;
padding: 8px 8px 8px 0.8em;
background-color: #000;
color: #FFFFFF;
text-decoration: none;

}
.nav li a:hover {
background-color: #1c1c1c;
color: #5d5d5d;
}

Screenshot of Result

Answer 2

您应该为a元素应用最小宽度：

.navbar .nav > li > a {
    min-width: 200px;
}

保持简单，如果您希望链接框更大，请修改链接元素。

您可能需要调整宽度规则才能仅应用于计算机屏幕，请通过调整窗口大小来检查，并查看@media queries

调整链接周围的Bootstrap框宽度

2 个答案: