Question

我需要更改导航链接的填充以使最后一个链接的背景变小，但是，当我这样做时，它会弄乱链接对齐并且它们不再在导航中垂直居中。导致这种情况的原因以及如何解决这个问题？

HTML

<nav class="navbar navbar-inverse">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <img src="img/logo.png" class="navbar-brand" href="index.html">
            </div>
            <div class="collapse navbar-collapse" id="nav">
              <ul class="nav navbar-nav navbar-left">
                <li><span class="fa fa-phone"> +62 202 555 0117</span></li>
              </ul>
              <ul class="nav navbar-nav navbar-right">
                <li><a href="#" class="active">Home</a></li>
                <li><a href="#">About us</a></li>
                <li><a href="#">Pricing</a></li>
                <li><a href="#">Contact us</a></li>
                <li><a href="#" class="nav-button">Get started</a></li>
              </ul>
            </div>
          </div>
        </nav>

CSS

.container {
    width: 1056px;
}
nav.navbar {
    padding: 12px;
    border-radius: 0;
    background: url("../img/nav-bg.png");
}
nav.navbar li {
    font-size: 14px;
    font-weight: bold;
    text-transform: uppercase;
}
nav.navbar li a {
    padding: 6px 20px;
}
nav.navbar li a:link {
    color: #9faeaf;
}
nav.navbar li a.active:link {
    color: #fff;
}
.nav-button {
    background: #6a7f7f;
}
nav.navbar a.nav-button:link {
    color: #fff;
}
nav.navbar a.nav-button:hover {
    background: #fff;
    color: #366a6b;
}

Answer 1

修正了：

nav.navbar li a {
     padding: 8px 20px; 
     margin-top: 0.5em;
}

更改Bootstrap导航链接填充而不会弄乱对齐

1 个答案: