html - 如何选择我的 Bootstrap 导航栏链接以进行正确定位？

Question

所以我有一个 Bootstrap 导航栏，我之前一直在选择跨度类为“nav-text”的链接。这适用于字体大小和颜色，但是当我尝试应用边距或填充时，我无法得到响应。我已经尝试过以许多不同的方式选择用于定位的链接，所以我转向了这里。

这是 html:

<ul class="nav navbar-nav navbar-right">

    <li><a href="physicians.php"><span class="nav-text">Physicians</span></a></li>
    <li><a href="location.php"><span class="nav-text">Directions</span></a></li>
    <li><a href="services.php"><span class="nav-text">Services</span></a></li>
    <li><a href="faq.php"><span class="nav-text">FAQ</span></a></li>
    <li><a href="privacy.php"><span class="nav-text">Privacy</span></a></li>
    <li><a href="health.php"><span class="nav-text">Health Links</span></a></li>
    <li><a href="policy.php"><span class="nav-text">Office Policy</span></a></li>
    <li><a href="https://webview.mckesson.com/####/"><span class="nav-text" id="view">W***** Login</span></a></li>
  </ul>

那么我该如何给 .nav-text 链接正确的定位呢？我成功地给#view id 链接留了一个填充。但是填充顶部也不起作用吗？

这是整个导航栏，如果你需要它( Bootstrap )

<header>
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
    <span class="sr-only">Toggle navigation</span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
  </button>
  <a class="navbar-brand" href="index.php"><img src="#" id="logo"></a>
</div>

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav navbar-right">

    <li><a href="physicians.php"><span class="nav-text">Physicians</span></a></li>
    <li><a href="location.php"><span class="nav-text">Directions</span></a></li>
    <li><a href="services.php"><span class="nav-text">Services</span></a></li>
    <li><a href="faq.php"><span class="nav-text">FAQ</span></a></li>
    <li><a href="privacy.php"><span class="nav-text">Privacy</span></a></li>
    <li><a href="health.php"><span class="nav-text">Health Links</span></a></li>
    <li><a href="policy.php"><span class="nav-text">Office Policy</span></a></li>
    <li><a href="https://webview.mckesson.com/mvfpi/"><span class="nav-text" id="webview">Webview Login</span></a></li>
  </ul>
</div>
</div>
</nav>
</header>

Fiddle

Answer 1

要为您的链接添加填充/边距，请使用:

.nav li a {
    padding: 45px;
    margin-right: 20px;
}

例如。

您更新的 jsFiddle