html - Bootstrap 导航栏调整大小

Question

我正在使用 bootstrap 构建一个简单的网站，但我在导航栏的高度方面遇到了一些问题。因此，当标题不太长时，导航栏看起来不错，如下所示:

但是，如果其中一个链接名称变得太长，那么导航栏将如下所示:

这是我的 HTML 代码:

<div class="container">
    <div class="masthead">
        <div class="navbar">
            <div class="navbar-inner">                    
                <ul class="nav">
                    <li class="active"><a href="../Home.html">Home</a></li>
                    <li><a href="../About.html">About</a></li>
                    <li><a href="../Officers.html">Officers</a></li>
                    <li><a href="../Join.html">Join</a></li>
                    <li><a href="../Calendar.html">Calendar</a></li>
                    <li><a href="../Contact.html">Contact</a></li>
                    <li><a href="../WSP.html">Wsdf asdkfjlaksjdf laksjdflkjasdf</a></li>
                    <li><a href="../Members.html">Members</a></li>
                </ul>                    
            </div><!-- /.navbar-inner -->
        </div><!-- /.navbar -->
    </div><!-- /.masthead -->
</div><!-- /.container -->

我的 CSS 看起来像这样:

/* Customize the navbar links to be fill the entire space of the .navbar */
.navbar .navbar-inner {
    padding: 0;
}
.navbar .nav {
    margin: 0;
    display: table;
    width: 100%;
}
.navbar .nav li {
    display: table-cell;
    width: 1%;
    float: none;
}
.navbar .nav li a {
    font-weight: bold;
    text-align: center;
    border-left: 1px solid rgba(255,255,255,.75);
    border-right: 1px solid rgba(0,0,0,.1);
}
.navbar .nav li:first-child a {
    border-left: 0;
    border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child a {
    border-right: 0;
    border-radius: 0 3px 3px 0;
}

如何调整我的 CSS 代码以使导航栏图形正确调整？

Answer 1

.navbar .nav li {
    display: table-cell;
    width: 1%;
    float: none;
    border-left: 1px solid rgba(255,255,255,.75);
    border-right: 1px solid rgba(0,0,0,.1);
    vertical-align:middle;
}
.navbar .nav li a {
    font-weight: bold;
    text-align: center;

}
.navbar .nav li:first-child {
    border-left: 0;
    border-radius: 3px 0 0 3px;
}
.navbar .nav li:last-child {
    border-right: 0;
    border-radius: 0 3px 3px 0;
}

.navbar .nav > .active {
  color: #555555;
  text-decoration: none;
  background-color: #e5e5e5;
  -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
     -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
          box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
}

试试这个可能会解决你的问题