Question

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

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;
  }
}

应该这样做。

导航栏未垂直对齐

2 个答案: