Регулировка ширины блока ботстрапа вокруг ссылок

Question

У меня есть пользовательская панель навигации, которую я создал с помощью Bootstrap с тремя простыми ссылками: Главная, Услуги и Контакт. Как сейчас, ящики вокруг каждой ссылки имеют разные размеры, потому что каждая ссылка содержит различное количество символов, как видно here. Я пытался изменить свой код, поэтому все элементы списка имеют ширину 100 пикселей, но ничего не меняется. Что я могу сделать, чтобы все поля вокруг моих ссылок были одинаковой ширины.

Вот 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

Вы должны применять минимальную ширину в a элементов:

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

Держите его простым, если вы хотите, чтобы ящик связи был больше, измените элемент ссылки ,

---

Вы, возможно, придется регулировать ширину правило, которое будет применяться только на экране компьютера, проверьте, что путем изменения размера окна, и увидеть @media queries

Answer 2

Вот 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; 
}