应用于 <a> 标记的引导按钮样式不会显示在导航栏中

Question

Total Bootstrap 新手在这里（还在学习 CSS）如果这是一个愚蠢的问题，非常抱歉......

我已经构建了一个 Bootstrap 导航栏，其中最后一个链接作为按钮元素，但后来意识到将其改为锚元素是更好的做法：

<div class="collapse navbar-collapse" id="tcsnavbar-links">
<ul class="nav navbar-nav navbar-right">
            <li><a href="#">Home</a></li>
            <li><a href="#">Order Information</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#" class="btn btn-primary navbar-btn" role="button">Quote Request</a></li>
        </ul>
    </div>

btn-primary 样式现在不再显示，因为它嵌套在链接元素中，我似乎无法编写 CSS 以便它“看到”这种样式并覆盖 div 上的默认样式：

#tcsnavbar-links {
padding-right: 20px;
 }

#tcsnavbar-links ul li a {
color: #5f5f5f;
}

#tcsnavbar-links ul li a:hover {
background-color: #eeeeee;
color: black;
}

.btn-primary {
background-color: #00afec;
border-color: #0296ce;
font-size: 1.1em;
}

.btn-primary:hover {
background-color: #0077c5;
}

如果有人能指出我正确的方向，将不胜感激，谢谢：}

Answer 1

我发现您的问题很有趣，并开始阅读 Bootstrap 文档并尝试了一些方法。

据我了解，在需要按钮时使用锚元素并不是一个好习惯。因此，当您想要一个按钮时，请使用按钮元素。 Source

但在大多数情况下，它可以正常工作，并且还打算使用锚元素上的按钮类。例如，您希望页面上的任何位置都有一些 Button，该 Button 链接到下一个页面，例如 Next Button。

但当您在.navbar-nav 中使用它时不会。文档明确地说

特定于上下文的用法

与标准按钮类一样，.navbar-btn 可用于<a> 和 <input> 元素。但是，.navbar-btn 和标准按钮都不是 类应该用在.navbar-nav.中的元素上

Source

但是你可以做的是使用 nav-pills 来处理这样的一个元素。然后你在导航栏中有一个类似按钮的链接

<div class="collapse navbar-collapse" id="tcsnavbar-links">
  <ul class="nav navbar-nav nav-pills navbar-right">  
    <li><button href="#" class="btn btn-primary navbar-btn" type="button">Quote Request</button></li>
  </ul>
  <ul class="nav navbar-nav navbar-right">
    <li><a href="#">Home</a></li>
    <li><a href="#">Order Information</a></li>
    <li><a href="#">About Us</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</div>

Bootply