如何选择正确定位的引导导航栏链接？

Question

因此，我有一个引导导航栏，我以前一直在选择带有“导航文本”span类的链接。这适用于字体大小和颜色，但当我尝试应用边距或填充时，我无法得到响应。我已经尝试过用很多不同的方式来选择定位的链接，所以我转到这里。

以下是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>

那么，我将如何给出正确的答案呢。导航文本链接是否正确定位？我成功地给了#view id链接一个空白。但是上面的填充物也不起作用？

这里是整个导航栏，如果你需要它（引导）

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

不停摆弄

Answer 1

要为链接添加填充/边距，请使用：

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

例如

更新的JSFIDLE