导航栏行未垂直对齐

Question

我正在尝试制作一个在较小屏幕上隐藏文本的导航栏。我无法让酒吧正确对齐！

http://jsfiddle.net/blisstdev/ZrA3u/10/

http://jsfiddle.net/blisstdev/ZrA3u/10/embedded/result/

如你所见，左边比右边低！

此外，左侧“ul”的第一个列表元素不会填充“ul”容器的大小，但所有其他列表元素都可以。这是为什么呢？

非常感谢！

<div class="navbar navbar-default navbar-fixed-top header" role="navigation">
    <div class="container-fluid header-top">
        <ul class="navbar-nav navbar-left pull-left list-inline contact-links">
          <li class="header-link-container"><a class="visible-xs call-link" href="tel:180042762687"><span class="glyphicon glyphicon-earphone"></span></a><span class="hidden-xs header-link-text">1-800-GARMANTS</span></li>

          <li class="header-link-container"><a class="to-do magento-add-in chat-link" href='****live chat**'><span class="glyphicon glyphicon-comment"></span><span class="hidden-xs header-link-text">Chat</span></a></li>
          <li class="header-link-container"><a class="magento-add-in email-link" href="mailto:ryan@garmants.com"><span class="glyphicon glyphicon-envelope"></span><span class="hidden-xs header-link-text">Email</span></a></li>
          </ul>

      <ul class="navbar-nav navbar-right pull-right list-inline account-and-cart-links">
        <li class="header-link-container"><a class="account-link" href="my-account.html"><span class="glyphicon glyphicon-user"></span><span class="hidden-xs header-link-text">My Account</span></a></li>
        <li class="header-link-container"><a class="cart-link" href="my-cart.html"><span class="glyphicon glyphicon-shopping-cart"></span><span class="hidden-xs header-link-text">My Cart</span></a></li>
      </ul>

    </div>
</div>

Answer 1

在小屏幕上，锚点设置为display: block，而右侧列表中的锚点则不是这种情况。只要确保对每个列表应用相同的样式，它们就会以相同的方式运行。

Answer 2

我更新了你FIDDLE，你需要像这样为左侧导航栏中的第一个<li> 项目设置相同的填充

@media (min-width: 768px) {
  .contact-links.navbar-nav > li.header-link-container:nth-child(1) {
    padding-bottom: 15px;
    padding-top: 15px;
  }
}

应该这样做。